Card

Card groups related content and actions into one bordered surface — a summary, a form section, a list item, a dashboard tile. The compound parts give it a predictable rhythm: CardHeader (with CardTitle + CardDescription), CardContent for the body, and CardFooter for actions, all sharing the surface padding and field gap. It's a container, not an interaction — for a whole clickable tile wrap it in a link or button; for a floating anchored surface use Popover.

Reach for a card to group, not to decorate. A border earns its keep when it sets genuinely related content apart from the page; boxing every element makes a layout noisy. Don't nest cards inside cards — switch to a Separator or spacing instead.

Keep one card to one idea. A card should cover a single entity or task; if it sprouts several unrelated sections and footers, split it. Use the CardHeader/Content/Footer regions so padding and spacing stay consistent rather than hand-rolling them.

Make whole-card affordances real. If the entire card is clickable, render it as one link/button with a single focus ring and accessible name — don't scatter nested click targets that fight the outer one. Right-align footer actions and lead with the primary one.