Skip to content
PixeloreUI
Surface

Card

The bevelled surface that everything else sits on. Comes with a header/content/footer composition so panels feel structurally consistent.

Anatomy

Hero stats

Updated each turn.

Lv 12 · HP 38 / 50

Card with avatar

ES

Eduardo

Lvl 99 · Frontend

Joined the party.

Interactive

Setting interactive turns the card into a focusable, hover-translating affordance — perfect for clickable list items.

Slot 1

Press to select.

NEW

Accessibility notes

  • The default Card is a plain div — semantically a group container.
  • Interactive cards add tabIndex=0 and a visible focus outline. For navigation, wrap the card in a Next.js <Link> or render it as one via asChild patterns instead of relying on onClick.
  • CardTitle renders as h3 — make sure the heading level fits its position in the document outline.
Edit this page on GitHub