Card
A token-driven surface container with optional Card.Header, Card.Body, and Card.Footer slots (also exported as standalone CardHeader / CardBody / CardFooter). Three elevation variants — elevated (soft shadow, no border), inline (hairline border, no shadow), and inset (recessed surface) — plus a padding scale of none / sm / md / lg. Forwards its ref to the host div and spreads arbitrary props, so it composes into any region.
Elevation variants
Elevated
Raised surface with a soft shadow and no border. Floats above the page.
Inline
Flat surface bounded by a hairline border. The default, in-flow container.
Inset
Recessed surface that reads as sunk into the page. Good for nested wells.
Header / Body / Footer with actions
Cloudflare
A founding member of the OCSS coalition. Routes signed child-safety signals at the edge.
Padding scale
padding="sm"
Section insets scale uniformly from a single CSS variable.
padding="md"
Section insets scale uniformly from a single CSS variable.
padding="lg"
Section insets scale uniformly from a single CSS variable.
Body only — no dividers
A single body with no header or footer renders no dividers — the padding still applies.