Card

Preview

When to use

Use a card to visually group related content and actions into a distinct, tappable or scannable unit. Cards work well for:

• Product listings, recipe tiles, or article summaries in a grid or list.
• Any content that needs visual separation from surrounding items.
• Interactive containers where the whole surface can be clicked or tapped.

When not to use

• Don't use a card to wrap a single piece of text or a solitary button — simpler layout structures are cleaner.
• Avoid nesting cards inside cards. Layered elevation creates visual noise without adding clarity.
• Don't use a card purely for decorative grouping when a divider or white space would suffice.

Behaviour

A card is a surface, not a layout engine. It controls the outer shell (padding, border, radius, background) and leaves internal spacing to the content pattern placed inside it. This separation keeps the component predictable and maintainable.

When a card is interactive, clicking or tapping anywhere on the card surface triggers the action. Non-interactive cards are static containers.

Anatomy

• Surface — the outer container that provides padding, background colour, border or shadow, and corner radius.
• Content slot — the inner area where a layout pattern or composed content block is placed. The card does not control internal gaps or element order; the slotted pattern does.

Variants

The card has three independent dimensions that combine to form a variant:

Padding (density)

• Default — standard padding, suitable for most contexts.
• Large — generous padding, useful when the card needs more breathing room.
• Small — compact padding for dense layouts.
• None — no padding; the content extends to the card edge. Use when the slotted content (such as a full-bleed image) manages its own spacing.

Radius

• Default — standard corner radius.
• Large — more rounded corners; use for softer, more expressive layouts.
• Small — a subtler curve.
• None — square corners; useful in tight grid layouts or when cards are flush with the viewport edge.

Style

• Border — a visible stroke around the card surface.
• Flat — no border; the card relies on background colour contrast or elevation to stand out.

States

• Default — static surface; content is visible, no interaction indication.
• Hover — surface highlights when the cursor moves over an interactive card.
• Focus — a focus ring is visible when the card is navigated via keyboard.
• Disabled — the card and its contents are non-interactive and visually reduced.

Placement & layout

Cards typically appear in a grid or horizontal scroll. The card fills the width of its grid column.

Keep a consistent padding variant and radius across all cards in the same context. Mixing density or radius within a single grid creates visual inconsistency.

Internal spacing — the gap between a heading and body copy, or between an image and text — belongs to the layout pattern placed inside the card, not to the card itself.

Accessibility

• Interactive cards must have a meaningful, accessible name. Use the primary heading or link inside the card as the label.
• When the entire card surface is a link, wrap it in an <a> element so keyboard and screen-reader users can activate it.
• Focus must be visible on interactive cards; the default focus ring covers this.
• Avoid placing multiple separate interactive elements inside a single fully-clickable card — it creates overlapping tap targets and confuses screen readers.

Related components

• Image — for presenting the visual media placed inside a card.
• Tag — for status labels or category markers that sit inside a card.
• Notification — for feedback messages that require attention; distinct from the card container.