Also known as:
PanelCardContainerBoxTable
Hero Card
Hero Cards are a large structural component for organizing primary content. They are used to create visual interest and draw attention.
- Overview
- Badge (not built)
- Button
- Button Group (not built)
- Card (not built)
- Checkbox Field
- Checkbox Group
- Collapsible
- Divider (not built)
- Dropdown
- Empty State
- Global Notification
- Hero Card
- Icon
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner (not built)
- Modal
- Pagination (not built)
- Popover
- Radio
- Radio Group
- Select
- Split Button
- Table
- Tag
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- Tooltip
- Well
Need to know
- The badge contains a number, ideally 1 character, showing a micro bit of information such as a step.
- For the image, use a graphic illustration that supports what's going on in the rest of the card.
- For the title, aim for 1 line of text.
Visuals
Coming soon.
When to use
- To organize information that needs to be prominent and inviting.
- When you have enough content to fill the space effectively. If you only have a little bit of information, use a guidance block or a Card component.
- When it's the primary feature of the page.
- For "at a glance" information that focuses the user's attention on one thing.
When not to use
- When there's long form content underneath, such as high density data in a Table, consider using a less prominent component, such as a guidance block or a Card component.