Menu

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.

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.

See also

Card component