Page hero

Page hero

The page hero is a full-width band on the brand surface. It has an eyebrow with the section name, a title and a lead. It has no image and no buttons. The page title above is one.

<div class="docs-hero">
  <div class="docs-hero__text">
    <div class="docs-hero__heading">
      <p class="docs-hero__eyebrow type-label">Section name</p>
      <p class="docs-hero__title type-h1">Page title</p>
    </div>
    <p class="docs-hero__lead type-lead">One or two sentences about the page.</p>
  </div>
</div>

Size

The sides use the same page padding as the header and the page below, so the text lines up with them. The band runs the full width of the screen. On screens wider than 1440px the sides grow, and the text stays level with the page content. The text column holds to 880px. There is 16px between the eyebrow and the title, and 24px between the title and the lead. The type sizes come from the Label, H1 and Lead styles, which already step at the same breakpoints.

Color

The band is surface/brand/primary. The eyebrow is text/on-brand/secondary, the title is text/on-brand/primary (white) and the lead is text/on-brand/body. The hero adds no colors of its own.

Using the page hero

Accessibility

• The hero is a <section> named by the h1 (aria-labelledby).
• The h1 has tabindex="-1" so a script can move focus to it. These docs do that after a click in the menu or in the next-page band.
• The three text colors are checked against the brand surface at 4.5:1 in every mode when the site is built.

The HTML

<section class="docs-hero" aria-labelledby="page-title">
  <div class="docs-hero__text">
    <div class="docs-hero__heading">
      <p class="docs-hero__eyebrow type-label">Section name</p>
      <h1 class="docs-hero__title type-h1" id="page-title" tabindex="-1">Page title</h1>
    </div>
    <p class="docs-hero__lead type-lead">One or two sentences about the page.</p>
  </div>
</section>