On this page
Overview
Show code, ProjectSummary.tsx
Variants
Content card
The default: a title, a short fact beside it, a description, its content, and actions in a strip along the bottom.
Show code, ActionStrip.tsx
Link card
The whole card is one link.
Show code, Destinations.tsx
Button card
The whole card is one button.
Show code, StartOptions.tsx
Feature card
An icon, a heading, a sentence and the one button that starts a feature.
- The heading names the feature.
- The sentence says what it gives people.
- The button starts it with a verb, such as Invite people.
Show code, ImportPlans.tsx
Backgrounds
- Muted
A card on the page or in a pane. The default.
- Default
A quieter fill, such as a settings section.
- Page
The page's own color, parted by space alone.
Show code, Backgrounds.tsx
Anatomy
Surface
Header
Title
Meta
Description
Content
Actions
Show code, CardAnatomy.tsx
Behaviour
Loading
While its content loads, a card can show as its own skeleton, as Loading shows.
Adapting to width
A card fills its container.
- In a narrow feature card, the button moves below the text.
Show code, InviteFeature.tsx
Rules
One card holds one subject, and lays out its parts inside it.
Use it when
- Content about one subject, such as a project's summary
- A summary with its own actions, such as Share and Open
- A whole surface that leads to one place or starts one action
- Introducing a feature with the one action that starts it, such as inviting the team
Show code, OneCardSections.tsx
Show code, NestedCards.tsx
Content
Put the fact that matters most for choosing beside the title.
- Start a link card with its destination's name.
- A link or button card holds no links or controls of its own.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to a link or button card, or into a card. |
| Enter | Follows a link card or presses a button card. |
| Space | Presses a button card. |