Surfaces
Card
A bounded surface, with no shadow under it.
Usage
When to reach for it
import { Card } from '@misoto22/design'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.
It clips to its own corner. A card that rounds and does not clip lays a full-bleed image's square corners over its round ones at all four corners, and the same goes for a filled first child — a defect that is invisible until the first card with an image at the top of it. Pass overflow-visible for the rarer card that deliberately overhangs.
Compose with the named sub-parts, or drop children straight in when the card has no header or footer to speak of.
Anatomy
| Element | Description |
|---|---|
| Boxrequired | A <div> with the --radius-lg corner and one of three grounds: outline, a hairline on the page ground and the default; plate, the one reversed feature surface; flat, no border at all, for a card whose grid already draws the rules between cells. It brings no padding, and it clips to its own corner. |
| Header | CardHeader — a space-between row above a hairline, px-5 py-4: title against the start edge, one marker or action against the end. |
| Title | CardTitle, in the editorial serif at --fs-item. An <h3> unless as says otherwise, and it reads --card-title rather than --ink directly, which is what keeps it legible when plate re-points that variable. |
| Body | CardBody — the content well at p-5, --ink-2, relaxed leading. |
| Footer | CardFooter — a quiet strip under a hairline, mono-meta at --ink-3-aa, for metadata or a secondary action. |
Best practices
Do
- Pass as on CardTitle: h3 is right inside a section that owns an h2 and wrong nearly everywhere else, and a grid of twelve cards is otherwise twelve h3s with no heading above them to belong to.
- Use CardTitle inside a plate rather than your own heading — plate re-points --card-title to --on-feature, and a title that reads --ink directly came out at 1.25:1 on that ground: invisible, and invisible only on the one variant whose job is to look different.
- Add the padding yourself when you skip the sub-parts: the box has none of its own, so children dropped straight in sit against the border.
- Pass overflow-visible for the card that deliberately overhangs — a marker pinned to its edge, a control that breaks the outline. The box clips by default, because a card that rounds and does not clip lays a full-bleed image’s square corners over its round ones.
Don’t
- A Card with an onClick is a div with an onClick — not focusable, not announced, unreachable by keyboard. Put a real control inside and let it stretch, so what is announced is a button and the whole card is still the target.
- Do not spend plate more than once on a screen: it is the system’s single reversed surface, and a band of plates is a band with no ground left to reverse against.
Examples
variants
The bounded surface and the one reversed one, side by side. There is no shadow under either: a card that needs to read as raised is a plate, which separates by reversal because this system has no elevation ramp to raise it with. Spend plate once per screen — a band of them is a band with no ground left to reverse against. Use CardTitle inside it rather than your own heading, too: plate re-points --card-title to --on-feature, and a title that reads --ink directly comes out at 1.25:1 on that ground, invisible on the one variant whose whole job is to look different.
Recent deploys
greenThe reversed plate
a real control
A whole card that acts as one target, without an onClick on the box. A Card with a click handler is a div with a click handler: not focusable, not announced, and unreachable by keyboard. The fix is a real control inside it, stretched over the box with an absolutely positioned overlay — so what is announced is a link with the title as its name, the focus ring lands on something, and the entire card is still the hit area. The box needs position relative for that to work, and anything the reader must also be able to click separately has to sit above the overlay.
api.misoto22.com
liveDeployed from main four minutes ago, in 2m 14s.
a ruled grid
flat is the ground for a card whose container already draws the rules between cells — three outlined cards inside a bordered grid is three borders where one was wanted. Two other things are load-bearing here. The box brings no padding of its own, so children dropped straight in sit against the edge: CardBody supplies it. And CardTitle is an h3 by default, which is right under the h2 above it and wrong the moment a grid of twelve cards has no heading for them to belong to — pass as to say which level this really is.
Revenue by region
Australia
1,204 orders
$48,210
Japan
862 orders
$31,940
Singapore
415 orders
$18,704
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.