Cards group related concepts and tasks so people can scan, read, and act. They display content in a familiar, recognizable style.
Figma
The Figma reference for Card will appear here once the design link is added.
Storybook
Interactive examples for Card will render here once the Storybook link is wired in.
Best practices
- Group related information together.
- Prioritize what people most need to know first.
- Use headings that set clear expectations about the card’s purpose.
- Keep to a single flow, or break complex flows into multiple sections.
- Use at most one primary call to action; keep persistent optional actions in the upper-right corner.
Do’s and don’ts
Do
Give a card a clear heading and one primary action.
Don’t
Pack a card with many competing calls to action.