Card

Usage

Use a card to summarize one object — a vehicle, a work order, a depot — in a grid or board, with a way to open it. Use a table when people compare many records field by field, and a list group for long single-column lists.

• Basic — title, meta and a short body; no interaction.
• Media — a photo or illustration of the vehicle on the sunken surface above the content.
• Interactive — the title is the one link; the whole card is its hit area. Never wrap the card in <a>.
• With actions — up to two buttons, one primary. More actions go in a menu.
• Selectable — a real checkbox for bulk actions ("Assign 3 vans").

Content: title is the object's name ("Van KX-219"), meta is one line of facts, body is two lines at most. Write status in words ("Oil change overdue by 6 days"), not only with color.

Anatomy

1. Container — <article class="card"> (or <li> in a list of cards) labelled by its title
2. Media (optional) — .card__media, bleeds to the edges, 16:9
3. Header — .card__header with .card__title (a heading) and .card__meta
4. Body — .card__body
5. Actions or footer (optional) — .card__actions / .card__footer, pinned to the bottom
6. Primary link (interactive) — .card__link on the title; its ::after covers the card
7. Select (selectable) — .card__select, label + native checkbox

Examples

States marked hover and focus-visible are frozen with .is-hover and .is-focus-visible. Those classes share their rule with the real pseudo-class; never use them in product code.

<article class="card card--interactive" aria-labelledby="c3-t">
  <header class="card__header">
    <h4 id="c3-t" class="card__title"><a class="card__link" href="#card">WO-4185 · Gearbox oil leak</a></h4>
    <p class="card__meta">Truck TR-077 · Idris Okafor</p>
  </header>
  <p class="card__body">11 h labour logged, parts ordered.</p>
</article>


<article class="card" aria-labelledby="c5-t">
  <header class="card__header">
    <h4 id="c5-t" class="card__title">Pickup PU-012</h4>
    <p class="card__meta">Oil change overdue by 6 days</p>
  </header>
  <p class="card__body">Last service 14 Mar at 132,100 km.</p>
  <div class="card__actions">
    <button type="button" class="btn btn--primary btn--sm">Book service</button>
    <button type="button" class="btn btn--ghost btn--sm">Snooze 7 days</button>
  </div>
</article>


<article class="card card--selectable" aria-labelledby="c6-t">
  <label class="card__select"><input type="checkbox" checked aria-labelledby="c6-t"> Selected</label>
  <header class="card__header">
    <h4 id="c6-t" class="card__title">Van KX-230</h4>
    <p class="card__meta">Renault Master · 22,480 km</p>
  </header>
  <p class="card__body">Ready for dispatch.</p>
</article>

API

Do and don't

Accessibility

• Role: <article> named by its title via aria-labelledby. In a grid of cards use <ul role="list"><li>.
• Interactive cards have exactly one link; its name is the title only, so link lists stay short. The stretched ::after enlarges the hit area without changing the name.
• Focus: the link's own ring is transparent and the 2px teal ring is drawn around the whole card (:has(:focus-visible)).
• Selected: native checkbox labelled by the card title; selection shows as a checked box plus a teal border.
• Forced colors: card border becomes CanvasText; selected border becomes a 2px Highlight.

Tokens