Component · 04
Card
A printed panel. Built from small parts (header, label, title, description, content, footer) so you only use what you need.
Raised and flat
02 · Button
Stamped, not floated
Hard shadows instead of blur.
Flat
Quiet by default
For dense lists and settings.
<Card>
<CardHeader>
<CardLabel>02 · Button</CardLabel>
<CardTitle>Stamped, not floated</CardTitle>
<CardDescription>Hard shadows instead of blur.</CardDescription>
</CardHeader>
<CardFooter><Button variant="primary">Try it</Button></CardFooter>
</Card>
<Card variant="flat">…</Card>Composition
Every component built so far in one place: same radius, border, type and shadow language.
Account · 01
Sign in New
<Card>
<CardHeader>
<CardLabel>Account · 01</CardLabel>
<CardTitle as="h2">Sign in <Badge variant="accent">New</Badge></CardTitle>
</CardHeader>
<CardContent>
<label>Email <Input type="email" /></label>
<Checkbox label="Remember me" defaultChecked />
</CardContent>
<CardFooter>
<Button variant="primary">Continue</Button>
<Button variant="ghost">Cancel</Button>
</CardFooter>
</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "raised" | "flat" | "raised" | Raised has the print shadow; flat is a quiet hairline box for dense layouts. |
| CardTitle as | "h1" … "h6" | "h3" | Pick the heading level that keeps the page outline correct. |