Card

Basic card with minimal content.

Card with header, content, and footer sections.

Card displaying user information with avatar.

Card showing statistics with icons.

size is a density switch, not a width switch: the root Card hands its resolved size down to CardHeader, CardContent and CardFooter through React context. md is the default and keeps the classic 24px padding, so existing cards render exactly as before.

All six free variants side by side. glass and gradient are rendered over a tinted surface here, because their translucency only reads against a background with some contrast.

radius is independent from size and variant. It replaces the rounding of the card root only, so nested media still needs its own rounding.

With asChild the card styles are applied to your own element through Radix Slot, so the whole card becomes a single anchor: one hit target, one focus stop, real middle-click and open-in-new-tab behaviour. The size context still reaches the sections and the interactive CSS classes still apply, but the Framer Motion micro-interaction is skipped in this mode - Slot merges props into one child while motion needs an element of its own. Swap the anchor for a Next.js Link when you route internally.