Primitives

Cards

The general-purpose container: variants for emphasis, sizes driven by density tokens, and composable sub-parts for consistent internal rhythm.

Variants

Every variant at the default size.

default

Standard bordered surface.

elevated

shadow-md at rest, for content that should read as raised.

interactive

Hover lift + border darken. Use when the whole card is clickable.

accent

accent-soft tint, for a highlighted or featured card.

subtle

surface-muted background, no border.

inset

For a card nested inside a muted parent container.

<Card variant="elevated" size="default">…</Card>

Sizes

Padding is driven entirely by the --d-card-* density variables — resize the density toggle in the sidebar to see these change.

size="compact" → p-[var(--d-card-compact)]
size="default" → p-[var(--d-card-default)]
size="spacious" → p-[var(--d-card-spacious)]
size="hero" → p-[var(--d-card-hero)]
size="none" — no padding applied by Card; full-bleed content owns its own spacing.

Composable sub-parts

Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer — assembled into realistic examples using live seed data.

Search request

completed

Find recent case law on AI copyright fair use

Mode
Deep Search
Latency
188ms
Results
52
sk-live-1...1004$0.06

API key

sk-live-1...4821 · created by Sarah Chen

1,284,920 calls
99.7% success
Rotated 12 days agoManage

Interactive variant

Hover to see the lift + border-strong treatment.

Deep Search

Click anywhere on this card — it's the whole target.