Card

Compact glass content tile for grids and lists. Use Panel for page/section chrome.

Preview

Live

Application review

Glass tile with title, copy, and actions.

Prefer cards inside a grid — not as the only chrome on a page.

Interactive

Hover / focus elevates the surface.

Tab here to feel the focus ring.

<article class="card">
  <div class="card-body">
    <h3 class="card-title">Application review</h3>
    <p class="card-sub">Glass tile with title, copy, and actions.</p>
  </div>
  <div class="card-foot">
    <button type="button" class="btn btn-primary btn-compact">Open</button>
  </div>
</article>

<article class="card card--interactive" tabindex="0" aria-label="Interactive card">
  <div class="card-head">…</div>
  <div class="card-body">…</div>
</article>

Variants

Body + foot

Default content card with action row.

Quiet tile

No media — text and actions only.

With media

.card-media — 16:9 slot for image/video.

Media card

Place an <img> inside the media slot.

Interactive

.card--interactive — hover/focus elevation. Name the card when it behaves like a control.

Selectable

Focus-visible ring on the tile.

Accessibility

  • Static cards are fine as <article> with a clear heading inside.
  • Interactive cards need a name (aria-label or visible title) and keyboard reachability (tabindex="0" or a nested control).
  • Prefer a real <button> / <a> for the primary action rather than making the whole card a mystery click target when possible.
  • Media images need meaningful alt (or empty alt if decorative).

API

HTML classes

Class Description
.card Root glass tile.
.card--interactive Hover / focus-within elevation.
.card-media 16:9 media slot.
.card-head / .card-title / .card-sub Header row and typography.
.card-body / .card-foot Main content and action footer.

React props

From src/core/Card.tsx — composition mirrors the class tree.

Prop Type Default Description
interactive boolean false Adds .card--interactive.
busy boolean false Adds .is-busy (suppresses interactive chrome).