Design documented
Component Status
React documented
Flutter documented
Design
Up to date
React
Up to date
Flutter
Up to date
Introduction
Cards are pre-styled containers that group related information in a compact and organized manner in order to improve content hierarchy, page scanability and enhance visual appeal. While the card imposes specific UI properties on its outer container, it allows full customization of its content.
Currently, the card component is not interactive and cannot be used for navigation purposes. Interactions can be achieved by placing other elements like a link or button inside of it.
A card is a UI component that comes with a predefined look and is, therefore, not suitable for grouping elements for technical layout purposes. Use container component instead.
When to use
- Content Grouping: Use cards to group related information or content together, especially if it is repeated on the page. This helps users quickly grasp the context and relationships between different pieces of content and scan the information. You can consider using cards in grid-based layouts to create a visually pleasing and organized structure.
- Visual Hierarchy: Leverage cards to establish a clear visual hierarchy within your UI. By using cards for more prominent or important content, you guide users to focus on key elements and create a sense of priority.
- Promotional Content: Cards are effective for showcasing promotional or featured content. Their self-contained nature allows for spotlighting specific items without overwhelming the overall UI.
Related Components
List & Selection card TBA