components icon

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
In progressElement design and development in progress

What's new

The v2 card component incorporates several optional elements, including imagery, icons, charts, and actions. In v1, these optional elements were presented as separate components.

Anatomy

The parts of a card, labeled 1 to 7.

The card component contains seven elements within four sections.
Media
1. Image: optional image, must have 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. Description: optional few lines of text
6. Container: optional container for charts or graphs
Footer
7. Call-to-action: optional link, button, or button group

Storybook demos

Vanilla

View the card demo and code in Vanilla.

Angular

View the card demo and code in Angular.