Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
Cards are containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | PublishedElement can be used in production |
From a navigational perspective, cards are similar to the link component. When used for featured information or related content, they are comparable to a list or a table component. In the latter instances, for example, ecommerce experiences will often include a toggle to switch between a list and card view.
Component | Use case |
---|---|
Card | Used for navigation purposes, featured information or related content, depending on context and elements added. As content containers, they are useful to organize information consistently within a page. |
Link | Use to navigate a user to another page or website, another place on the same page, or to open a link in a new tab. |
List | A list presents a group of related information in a scannable format. |
Table | A table displays complex groups of information for the purpose of reference, comparison, or choice. |
A card component can contain up to six elements within four sections. Note that except for the card title, all elements are optional. This allows cards to have different content combinations and to remain flexible to diverse contexts across digital experiences.
The card component contains six elements within four sections.
Media
Header
2. Icon (optional): icon placed above or to the left of the card title.
3. Card title: required headline or title.
4. Subtitle (optional): supporting line of content.
Body
5. Container (optional): container for charts or graphs.
Footer
6. Call-to-action (optional): link, button, or button group.