Mozilla Protocol
  • 16.0.1

Hero: With Image

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.

Hero images can overflow their container, with part of one side hidden off-screen at some screen sizes. This is by design and this component was intended for decorative, editorial-style images not essential content. If you expect the entire hero image to be visible, this isn’t the right component to use. It’s one reason this component has been deprecated in favor of the Split component.

  • By default the copy is on the left and image on the right. Reverse 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.
  • 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.

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.
<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 of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
            </div>

            <p class="mzp-c-hero-cta">
                <a class="mzp-c-button" href="https://example.com">Call to Action</a>
            </p>
        </div>
    </div>
    <div class="mzp-c-hero-image">
        <img src="../../img/image-3-2.jpg" alt="">
    </div>
</section>