Card

Example

When to use

• Reach for a card to present a self-contained unit — a summary, a setting, a list item with its own actions. Avoid nesting cards deeply; prefer a filled variant for grouped panels.
• Pick a variant by emphasis: elevated for a raised surface, outlined for a flat bordered one, filled for a tonal panel.

When not to use

• For a single piece of status metadata — a count or label — use a Badge or Chip rather than a whole surface.
• For transient feedback that should appear and dismiss itself, use a Toast; for inline messages, an Alert.
• When the “card” must block the page until the user responds, use a Dialog — a card never traps focus or dims the background.
• To frame a whole route's heading and actions, use a Page Header instead of a top-level card.

Related components

• Button — the controls you project into [slot=actions].
• Page Header — route-level title and action bar.
• Empty State — the placeholder shown when a card's data set is empty.
• Theming — the token contract the card re-skins through.