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: neitherhref 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 requiredlabel 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.Usage Guidelines
When to Use
Use the Card when:- Grouping related content – Related content needs a contained surface to stand apart from its surroundings.
- Making the whole surface one action – The entire card opens a destination or runs a single action. Pass a link or press action with a label.
- Combining a card action with nested controls – An interactive card’s content includes its own buttons or links, which stay independently operable.
- Presenting static content – The surface needs no hover, focus, or press behavior.
When not to use
Avoid using the Card for:- Showing content the agent generated in the chat transcript – Use the Artifact Card instead.
- Presenting proposed changes for review – Use the Guidance Card instead.
- Opening a destination in a new tab – Link cards have no new-tab support. Use the Link instead.