Page Hero

Hero

  • deprecated

A large promotional section, usually at the very top of the page, featuring at minimum a headline and a call to action. A brief description is recommended but optional.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Call to action 

<section class="mzp-c-hero  ">
  <div class="mzp-l-content ">
    <div class="mzp-c-hero-body">
      <h1 class="mzp-c-hero-title">A Headline With 30 Characters</h1>

      <div class="mzp-c-hero-desc">
        <p>A description with a maximum of 140 characters
          and <a href="#">a link</a>. That means we usually
          only have room for one or two sentences. Like
          this.</p>
      </div>

      <p class="mzp-c-hero-cta">
        <a class="mzp-c-button" href="#">Call to action</a>
      </p>
    </div>
  </div>

</section>

Notes

  • The content is centered by default without a hero image.
  • The description can feature a larger tagline with the mzp-c-hero-tagline class.
  • Add the mzp-t-dark class to invert text colors for dark backgrounds.
  • See the demo page for more examples in a full window context.

No-nos

  • This component already has an inner container, so don't place it inside the mzp-l-content container. The nested spacing will get weird.

Hero with image

  • deprecated

A hero section featuring a large image.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Call to action 

<section class="mzp-c-hero mzp-has-image ">
  <div class="mzp-l-content ">
    <div class="mzp-c-hero-body">
      <h1 class="mzp-c-hero-title">A Headline With 30 Characters</h1>

      <div class="mzp-c-hero-desc">
        <p>A description with a maximum of 140 characters
          and <a href="#">a link</a>. That means we usually
          only have room for one or two sentences. Like
          this.</p>
      </div>

      <p class="mzp-c-hero-cta">
        <a class="mzp-c-button" href="#">Call to action</a>
      </p>
    </div>
  </div>

  <div class="mzp-c-hero-image">
    <img src="../../../static/img/hero/hero-image.png" alt="">
  </div>
</section>

Notes

  • Add the mzp-has-image class to change the layout for a hero image. The copy and image stack vertically on small screens and appear side by side on larger screens.
  • By default the copy is on the left and image on the right. Reversed the layout with an mzp-l-reverse class.
  • The image and copy switch sides in RTL languages. Plan for this and choose your image wisely.
  • Hero images can overflow their container, with part of one side hidden off-screen at some screen sizes. Plan for this and choose your image wisely.
  • The height of the hero section is determined by the amount of text within it. Long titles, long introductions, product logos, CTAs, etc all contribute to how much space the hero takes up.
  • Images are scaled to fit the height of the container, thus the size of the image is largely determined by the height of the hero section. Taller heroes (with more content) will have larger images and more of one side may be hidden off-screen, depending on the image width. Plan for this and choose your image wisely.
  • Page heroes are intended to span the entire viewport. See the demo page for more examples in a full window context.

Tips

  • We recommend hero images at least 800px by 600px. A 16:9 aspect ratio works well though more of it can be hidden when the hero section is tall. Plan for this and choose your image wisely.
  • Choose your image wisely.

A Firefox branded hero with image

  • deprecated

A hero section with Firefox product branding. This example also features a tagline.

A Headline With 30 Characters

A short tagline with about 40 characters.

Download Firefox Firefox Privacy Notice 
<section
 class="mzp-c-hero mzp-has-image mzp-t-product-firefox">
  <div class="mzp-l-content ">
    <div class="mzp-c-hero-body">
      <h1 class="mzp-c-hero-title">A Headline With 30 Characters</h1>

      <div class="mzp-c-hero-desc">
        <p class="mzp-c-hero-tagline">A short tagline with
          about 40 characters.</p>
      </div>

      <div class="mzp-c-hero-cta">

        <div class="mzp-c-button-download-container">
          <a href="#" class="mzp-c-button mzp-t-product mzp-t-product-firefox">
    Download Firefox
  </a>
          <small class="mzp-c-button-download-privacy-link">
    <a href="https://www.mozilla.org/privacy/firefox/">Firefox Privacy Notice</a>
  </small>
        </div>

      </div>
    </div>
  </div>

  <div class="mzp-c-hero-image">
    <img src="../../../static/img/hero/hero-image.png" alt="">
  </div>
</section>

Notes

  • Product icons can be displayed using an additional theme class:
    • mzp-t-product-firefox
    • mzp-t-product-beta
    • mzp-t-product-developer
    • mzp-t-product-nightly
    • mzp-t-product-focus
    • mzp-t-product-mozilla
    • mzp-t-product-vpn
    • mzp-t-product-pocket
  • This example shows a mock download button. Actual download buttons on mozilla.org are much more complex with a lot of hidden markup so the CTA wrapper here is a div where other examples use a p element (a paragraph can only contain text and phrasing elements; a p wouldn’t be correct for a real download button).
  • See the demo page for more examples in a full window context.