Surfaces
Card
A bounded surface, with no shadow under it.
When to reach for it
Examples
variants
Recent deploys
greenThe reversed plate
Notes
A bounded surface.
No shadow, by law: depth in this system is a hairline and a change of ground, never a blur. A card that needs to read as raised is a plate, which separates by reversal instead.
Compose with the named sub-parts, or drop children straight in when the card has no header or footer to speak of.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'outline' | 'plate' | 'flat' | 'outline' | `outline` is a hairline box on the page ground — the default, and correct for a card sitting among other cards. `plate` fills with the one reversed surface and is for a card that IS the point of its band; use at most one per screen. `flat` drops the border entirely, for a card whose grid already draws the rules between cells. |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
CardHeader
Header row — title on the left, an action or marker on the right.
Takes no props of its own.
CardTitle
The card's title, in the editorial serif.
An <h3> by default, which is right inside a section with its own <h2> and wrong nearly everywhere else — pass as rather than leaving a page with a heading order that jumps.
Takes no props of its own.
CardBody
The content well.
Takes no props of its own.
CardFooter
A quiet strip for metadata or secondary actions.
Takes no props of its own.