Card

Cards are styled, flexible containers used to group related information.

Component Status

Design

Up to date

React

Up to date

Flutter

Update required

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.

 

When to use

  1. 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.
  2. 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.
  3. 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.
Content grouping

Content grouping

Visual hierarchy

Visual hierarchy

Promotional

Promotional