Layout
Card
The container for everything on a page: a flat surface with a hairline border. Flat tiles nest inside it; glow marks the one highlighted panel.
Examples
Card with a head and flat tiles
<Card>
<CardHead>
<div><Kicker>Latest run</Kicker><h3>Backup run #1,240</h3></div>
<ButtonLink href="/backups/1240" variant="outline" size="sm">View full results</ButtonLink>
</CardHead>
<div className="metric-grid metric-grid--two">
<StatCard flat label="Successful" tone="success" value={40} />
<StatCard flat label="Failed" tone="danger" value={2} />
</div>
</Card>Glow: the one highlighted panel
<Card glow>
<Kicker>Ready</Kicker>
<h3>Start backing up</h3>
<p>Four repositories selected. The first run takes about a minute.</p>
<Button leftIcon={<Play />}>Run now</Button>
</Card>Guidelines
- Default cards pad 24px; flat cards (bg-200, 10px radius) are tiles inside a card; table cards have no padding so rules run edge to edge; hero cards use the 20px radius for a landing panel.
- A CardHead holds a CardTitle or a kicker plus headline on the left, and a small action or CardMeta timestamp on the right.
- Never nest a card in a card (use flat), never add a gradient or a coloured edge, and never more than one glow per view.
Props
| Prop | Type | What it does |
|---|---|---|
| variant | "default" | "flat" | "table" | "hero" | The surface. Defaults to default. |
| glow | boolean | Amber border and glow for the one highlighted panel. |
| as | ElementType | section by default; div, article or li where the markup needs it. |