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 | In progressElement design and development in progress |
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.
Contents
What's newCopy link to this section
Copy link to this section
The v2 card component incorporates several optional elements, including imagery, icons, charts, and actions. In v1, these optional elements were presented as separate components.
AnatomyCopy link to this section
Copy link to this section
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 demosCopy link to this section
Copy link to this section