Card

When to use

Card shows the information and actions of one topic together: a dashboard summary, a group of settings, a link to a record. Cards usually sit side by side in a grid and users scan across them.

When not to use

• For a whole page: the page is already a region; do not wrap all content in one card.
• For a numeric summary: use StatCard for tiles with a value, change and trend.
• For record rows: use Table or DataTable for many records to compare.
• For the rows of a list: use ListItem for repeated rows; do not put each row in its own card.

Anatomy

1. Root: surface, border or shadow and 16 px (radius-lg) corners. A <section> when it has a title.
2. Header (Card.Header): title, description and action.
3. Title (Card.Title): 16 px semibold heading; level h3 by default.
4. Description (Card.Description): one or two lines under the title, in the subtle colour.
5. Action (Card.Actions): at the end of the header row, optional.
6. Body (Card.Body): the main content.
7. Footer (Card.Footer): actions, or status and secondary information.

Behaviour

• A Card is static by default: it does not change on hover or click and is not a tab stop.
• An interactive card rises 2 px and its border darkens on hover; it settles while pressed. With reduced motion only the border changes.
• An interactive card has one link (Card.Link) whose hit area covers the card. Other actions sit above the link and are tab stops of their own.
• Content wraps to the card width; the card grows with its content. For equal heights in a grid, give the grid cell h-full.

Guidelines

One card, one topic

The title should cover everything in the card. Use two cards for two topics.

Card title

Card content goes here.

DoTitle and content describe the same topic.

Card title

Card title

Don'tA card inside a card: the hierarchy does not read.

One destination for an interactive card

When the whole card is clickable, it opens one place. Other actions sit apart in Card.Actions or Card.Footer.

Card title

Edit

DoThe card opens the detail; edit is a separate button.

Card title

First linkSecond link

Don'tTwo separate links in one card: it is unclear which one opens.

One primary action

Keep at most one primary Button in the footer.

Card title

Primary buttonSecondary button

DoOne primary and one secondary action.

Card title

Primary buttonPrimary button

Don'tTwo primary actions compete.

Show status in text

Show a card’s status with a Badge, not with the border colour.

Card title

Active

DoThe status is in a Badge, as text.

Card title

Don'tOnly the border colour carries the status.

Content

• Write the title as a noun phrase in sentence case: “Card title”, “Notification settings”.
• Keep the description to two lines at most; move longer text to the body.
• Start footer Button labels with a verb: “Save”, “View details”.
• The link text of an interactive card is the title itself; never “Click here” or “More”.

Platforms

• Desktop: cards sit in a 2-4 column grid; cards in one row use the same variant.
• Mobile: at 390 px cards stack in one column. A full-bleed look without side borders is not built yet; the page margin stays.

Related components

• Badge: shows the card’s status in the footer or next to the title.
• Button: for the card’s actions.
• Grid: lays cards out in a grid.
• StatCard: a tile built on Card for numeric summaries.