Hero Card
Hero Cards are a large structural component for organizing primary content. They are used to create visual interest and draw attention.
Also known as:
PanelCardContainerBoxTable
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- 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
UI Kit
When to use and when not to use
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.