Card

A surface with a hairline border, the large radius and card padding. With href the whole card is a link that lifts on hover; featured draws it in the action colour; grid lays grid paper under the content.

Surface, featured, link on grid paper

Light

Surface

One idea per card, with a hairline border.

Featured

The one card a section recommends.

Link on grid paper

The whole card is the link.

Graphite

Surface

One idea per card, with a hairline border.

Featured

The one card a section recommends.

Link on grid paper

The whole card is the link.

Story: /stories/card/variants/

Guidelines

• One idea per card; cards in a row have the same structure.
• At most one featured card per group.
• A link card has one target: no other links inside it.
• Borders, not shadows: the card lifts on hover by moving and darkening its border.
• Motion: a link card lifts by space-1 and its border turns ink over motion.duration.base on hover; still under reduced motion.

Tokens used

Read from the component’s source:

--action-bg--action-subtle--bg-grid--bg-surface--border-default--border-strong--fg-default--motion-duration-base--motion-ease-standard--radius-lg--space-1--space-4--space-6--space-8--stroke-focus--stroke-hairline--stroke-ink