Card

A raised surface grouping related content — the workhorse of SaaS dashboards. Header + body (+ optional footer) slots. The header adapts to the card's OWN width via a container query: it stacks vertically when the card is narrow, even on a wide screen (resize the demo panels). Elevation comes from a soft shadow, not a heavy bg shift.

Standard card

App surface

Use data-surface="app" when cards live in dense desktop app shells and need a tighter, more operational corner radius.

Interactive (clickable) cards

Add data-interactive (or use an <a class="c-card">) for a hover lift + focus ring. Use these for navigation tiles and selectable list items.

Container-query header collapse

The two cards below are in a fixed narrow panel. Even on a wide screen, their headers stack because the card is narrow (< 28rem), not the viewport.