Hero
Eyebrow, display headline, lede and actions. Centred or start-aligned.
Examples
Hero
Introducing
Proportion, shipped.
One ratio for space, type and radius. Glass only where it floats.
Anatomy
section.hero | Grid of stacked parts with generous block padding. |
> h6 | Optional eyebrow above the headline. |
> h1 | The headline, held to 14 characters per line so it breaks into a block. |
> p | The lede, at the large size in muted text, held to a reading measure. |
> .cluster | Optional row of actions; one primary button, the rest default. |
API
| Attribute | Values | Description |
|---|---|---|
data-center | boolean | Centres every part and its text. Default start-aligned. |
Accessibility
- Keep one
<h1>per page; the hero's is usually it. - The
<h6>eyebrow lands in the heading outline above the<h1>. Use<p class="eyebrow">if it shouldn't. - Give the
<section>an accessible name (aria-labelledbyon the<h1>) if you want it listed as a region.