Skip to main content

Foundations

Hero

Render the page-level introduction block. A bold, unapologetic welcome mat for your page.

Curated demo

Component docs

Hero introduces a page with high-signal context.

Reference

Render the page-level introduction block. A bold, unapologetic welcome mat for your page.

  • Use Hero for top-of-page intros, not repeated in-page headings. It's the star of the show, not an extra.
  • Keep ledes short enough to scan quickly. Leave the poetry for the body text.

Example snippet

<Hero title="Button" lede="Primary shared action control." />