Page Hero

Hero

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 approximately 140 characters. That means we usually only have room for one or two sentences. This is what that looks like.

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 approximately 140 characters. That
          means we usually only have room for one or two sentences.
          This is what that looks like.</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-firefox class for Firefox branding (changing font to Open Sans).
  • 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.

Hero with image

A hero section featuring a large image.

A Headline With 30 Characters

A description with approximately 140 characters. That means we usually only have room for one or two sentences. This is what that looks like.

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 approximately 140 characters. That
          means we usually only have room for one or two sentences.
          This is what that looks like.</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.
  • The bottom curve shape can be removed with an mzp-u-no-shape class. However, it’s preferable to override the shape in custom CSS for your page rather than a presentational class in the HTML.
  • 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

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.

<section class="mzp-c-hero mzp-has-image mzp-t-firefox 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-download mzp-t-firefox 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

  • Adding a theme class of mzp-t-firefox will change the title font to Open Sans and add a default curve shape to the bottom.
  • 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.
  • The bottom curve shape can be swapped with a different shape in your page’s CSS (it’s an SVG mask). You can also change the shape’s fill color in CSS with the selector .mzp-c-hero.mzp-t-firefox:after
  • The page section immediately after/below the hero should have a background color matching the color of the curve shape so the sections will merge seamlessly.
  • You can disable the default shape with a mzp-u-no-shape class but it’s preferable to do that in your page’s CSS rather than a presentational class in the HTML.
  • 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.