Card

The surface that groups a title, a body and its actions into one unit on the page.

import from ~/components/ui/card

Anatomy

Discovery Audit

A focused review of your funnel and tech stack.

Body copy lives in CardContent. It inherits muted text and comfortable leading, and it already sits inside the card padding.

Card + Header / Title / Description / Content / Footer

Every slot is optional, but the order is fixed. Padding lives in the slots, never on the Card.

Variants

Default

Border plus a raised shadow. The standard surface for grouped content.

variant="default"

Border plus a raised shadow. The standard surface for grouped content.

Bordered

Border only, no shadow. Flatter, for dense grids and nested contexts.

variant="bordered"

Border only, no shadow. Flatter, for dense grids and nested contexts.

Ghost

No border, no background. Grouping without a visible container.

variant="ghost"

No border, no background. Grouping without a visible container.

Interactive

Lifts and warms its border on hover. Only when the whole card is a link.

variant="interactive"

Lifts and warms its border on hover. Only when the whole card is a link.

Title sizes

Discovery Audit

The generous step, for a standalone card.

Discovery Audit

The default step, for a card in a grid.

size

Two steps. `lg` for a card that anchors a page, the default for cards that sit in a grid.

In context

Conversion+12%

4.8%

vs last month

Case study: the Keystone rebuild

How we cut load time by 60% and doubled qualified leads in one quarter.

grid

A stat card and a linked case study. Cards carry other components; they do not restyle them.

Rules

Do

Use the default variant for a standalone block of grouped content.
Reach for interactive only when the entire card navigates somewhere.
Wrap an interactive card in one link, so the destination has a real name.
Pick the CardTitle size axis rather than restyling the heading with text- classes.

Don't

Do not nest a default card inside another; use bordered or ghost for the inner one.
Do not put two primary buttons in one CardFooter. One card, one primary action.
Do not add padding to the Card itself; the header, content and footer already own it.
Do not mix title sizes within one grid of cards; the row stops scanning evenly.

Built on Card: Article Card, a linked article teaser (image, tag, date, title, excerpt). It lives under Patterns, not here, because it composes Card with a Badge and adds an editorial decision a primitive should not carry.