---
title: Hero Card
navTitle: Hero Card
summaryParagraph: Hero Cards are a large structural component for organizing primary content. They are used to create visual interest and draw attention.
tags: ["Panel", "Card", "Container", "Box", "Table"]
needToKnow:
- 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.
demoStoryId: herocard-react--default-kaizen-site-demo
---

## 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](/components/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](/components/table), consider using
 a less prominent component, such as a guidance block or a [Card](/components/card) component.

## See also

*   [Card component](/components/card/)