Cards
Uses
- Content aggregation: ideal for displaying lists of items, such as product listings in an online store or news articles on a dashboard.
- Summarizing information: great for providing a high-level overview of different subjects, allowing users to quickly scan and decide which topics to explore further.
- Modular dashboards: useful for presenting various high-level information, like menu options or visual summaries, in an organized way.
Value to user
- Scannable content: their primary purpose is to present summary information that users can quickly digest, making it easier to scan and find relevant content.
- Visually distinct: cards use visual cues, like shadows or borders, to stand out from the background and the surrounding content, helping to separate information into semantic blocks.
- Actionable: they often include calls to action, such as buttons, and the entire card can be clickable to navigate to more detailed content.
- Responsive: cards are designed to adapt to different screen sizes, making them suitable for responsive web and mobile design
Best practices
- Keep card content focused on one topic.
- Include consistent spacing and hierarchy.
- Provide clear action buttons when needed.
Accessibility notes
- Maintain logical heading order.
- Ensure card content is accessible via keyboard.
Examples
Default card
All cards
Can’t find what you’re looking for? Get in touch