Card
A content container with body, optional header and footer, and image regions.
Basic
A card with just .card__body. Drop in a form, a stack of fields, or any block of content.
Title, subtitle, text, links
.card__title sits at a fixed font size regardless of the heading tag you pick. .card__subtitle reads --color-muted-foreground so the muted treatment is baked in and no utility is needed.
Images
.card__image is position-aware. As the first child it rounds its top corners; as the last child it rounds the bottom. Wrap content in .card__overlay to sit it over the image.
Header, body, footer
The default header is transparent and inherits the card body background. The footer sits on --color-surface-2 so the body and footer split reads without a heavy border. Wrap trailing controls in a .card__action slot to push them to the end of the header row.
Heading row
.card__heading is a section sub-header for use inside the body: a title with optional trailing controls. Put the controls in a .card__action slot and they sit at the end of the row while the title packs to the start, the same slot the header row uses.
Alternate header
Opt the header onto --color-surface-2 with .card__header--alt to mirror the footer's contrast. Composes with .card__header.
Small header
The header row defaults to a taller height. Add .card__header--sm to tighten it for dense layouts.
Customization
These variables retune .card without touching component CSS. Override on .card itself, on a parent scope, or on :root. The cascade scopes the change.
| Variable | Use |
|---|---|
--card-radius | Corner radius |
--card-padding-inline | Left and right padding, shared by header, body, and footer so their edges align |
--card-padding-block | Top and bottom padding of the body |
--card-bg | Background |
--card-color | Text color |
--card-border-width | Border thickness; set 0 to drop the border |
--card-border-color | Border color |
--card-shadow | Drop shadow; set to none for a flat, frame-only card |
--card-header-height | Minimum height of the header row; .card__header--sm lowers it |