Card

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.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

When to use

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.

ComponentUse case
CardUsed 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.
LinkUse to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.
ListA list presents a group of related information in a scannable format.
TableA table displays complex groups of information for the purpose of reference, comparison, or choice.

Anatomy

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

  1. Image (optional): image, must have a 16:9 aspect ratio.

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.

Articles

Cards definition

Read the Nielsen Norman Group's article on cards.