Containers & Overlays
Card
Card is a general-purpose content container grouping related information with a clear visual boundary.
Elevation (Flat/Raised) — 2 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.1.0-beta
Known open questions
- Confirm raised elevation shadow offset/spread values from Figma shadow tokens.
- Clickable-card pattern (single interactive target) not implemented — TODO before using Card as a link surface.
Live preview
Card uses component/radius/container and container-level elevation tokens — not the control radius used by Button or Text Input.
Flat elevation
Project overview
Group related content, metadata, and actions in a bounded surface. The footer composes real Button instances, matching the Figma component structure.
Elevation
Flat / Raised
Flat card
No shadow — border defines the boundary using semantic/border/default.
Raised card
Uses shadow-blur/3 and shadow-color/3 for subtle elevation.
Purpose
A general-purpose content container grouping related information with a clear visual boundary (header, body, footer).
Variants and states
flat · raised
When to use
Grouping a discrete unit of related content and actions.
When not to use
A full-page-blocking decision — use Dialog.
Accessibility
If the whole Card is clickable, it needs a single clear interactive element, not the entire card silently clickable.
Common mistakes
Overusing Card for every piece of content on a page, creating visual noise.
Properties
Elevation as variants. Title (text), Body (text). Footer is a real composed row with actual Button instances.
Tokens used
semantic/surface/defaultsemantic/border/defaultcomponent/radius/containershadow-blur/3shadow-color/3
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "div" | "article" | "section" | "li" | "div" | Semantic wrapper. Use article only for independently meaningful content. |
| elevation | "flat" | "raised" | "flat" | Flat uses border; Raised uses shadow-blur/3 and shadow-color/3. |
| title | string | — | Optional card header title. |
| headingLevel | "h2" | "h3" | "h4" | "h3" | Heading level for the optional title. |
| footer | ReactNode | — | Optional footer row — typically composed Button instances. |
React example
Copy React example
import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
export function Example() {
return (
<Card
as="article"
title="Billing"
elevation="raised"
footer={<Button size="sm">Manage plan</Button>}
>
Your next invoice is due on April 1.
</Card>
);
}