Cards are styled, flexible containers used to group related information.
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.
- 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.