Skip to main content

​
Options

The Card supports padding and three interaction shapes — static, link, and button.

​
Variants

Card renders one of three shapes based on which props are passed: neither href nor onPress renders a non-interactive <div> surface; href renders a whole-card link (<a>); onPress renders a whole-card button (<button>). Interactive cards require a label for their accessible name.

​
Padding

​
Interactive Card

Both interactive shapes use a stretched hit target that covers the full surface, so the entire card — not just its text — responds to a click or tap. Their accessible name comes from the required label prop, not from the visible content.

​
Behavior

Only the interactive variants — link and button — respond to hover, focus, and disabled states. The static variant has no interactive behavior.

​
Visual States

Hover lifts the surface with a stronger shadow, and keyboard focus draws a ring around the whole card. Disabled — button cards only, since links have no disabled state — dims the surface and suppresses the hover lift.

​
Keyboard Interaction

Keyboard interaction applies only to the interactive variants — link and button. The static variant is not focusable.
Last modified on July 25, 2026