Cards
Overview
Description
The card component is a flexible, modular container for grouping related content and actions into a distinct, scannable unit, similar to a physical card. Cards provide a visually organized entry point into more detailed information, featuring elements like images, text (title, description), and actions (buttons) to help users quickly understand and explore content across different screen sizes.
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.
Can’t find what you’re looking for? Get in touch