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:

AnchorNeed 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.


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.

See also