components
Card
The default container for a self-contained chunk of content. All variants honour the sparing-shadow policy — hover lift is opt-in per card, never global.
Read the full specStatic
A plain informational card. Border-only; no shadow.
Weekly incident summary
Seven-day rolling window across your areas.
42 reports, down 18% on last week.
tsx
<Card>
<CardHeader>
<CardTitle>Weekly incident summary</CardTitle>
<CardDescription>Seven-day rolling window across your areas.</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
42 reports, down 18% on last week.
</p>
</CardContent>
</Card>Interactive — hover lift
Opt into a subtle shadow on hover by applying it at the call site. The card's base stays border-only; the lift signals affordance.
tsx
<Card className="transition-shadow hover:shadow-sm">
...
</Card>Selected
When a card represents a selectable option, signal state with a primary-coloured ring. Avoid using background fill alone — colour-blind users lose the cue.
Starter
Up to 1 area.
Standard
Up to 10 areas.
Enterprise
Unlimited areas.
tsx
<Card className="ring-2 ring-primary">...</Card>With media
Lead with a 16:9 image, then content. Keep the image flush — rounded corners on the card clip the media automatically with `overflow-hidden`.
Aerial overview
Camps Bay, Cape Town
3 active alerts in the last hour.
tsx
<Card className="overflow-hidden">
<div className="aspect-video bg-muted" />
<CardHeader>
<CardTitle>Aerial overview</CardTitle>
<CardDescription>Camps Bay, Cape Town</CardDescription>
</CardHeader>
</Card>