Also known as:
Hero Cards are a large structural component for organizing primary content. They are used to create visual interest and draw attention.
Avatar (not built)
Badge (not built)
Button Group (not built)
Card (not built)
Date Picker (not built)
Divider (not built)
Illustration (not built)
Infinite Scroll (not built)
Loading Skeleton (not built)
Loading Spinner (not built)
Pagination (not built)
Tile (not built)
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.
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
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
, consider using a less prominent component, such as a guidance block or a
© Culture Amp Pty Ltd
Link to Culture Amp site