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
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
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 card demo

View the card demo and code in Vanilla.