Mozilla Protocol
  • 16.1.0

Hero: With Image Reversed

By default the copy is on the left and image on the right. Reverse the layout with an mzp-l-reverse class. In a reverse layout the image can overflow to the left, hiding some of the image. Plan for this and choose your image wisely.

The image and copy switch sides in RTL languages.

The mzp-l-reverse class has no effect on a centered Hero (without an image).

<section class="mzp-c-hero mzp-has-image mzp-l-reverse">
    <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">
                <button class="mzp-c-button" type="button">Call to Action</button>
            </p>
        </div>
    </div>
    <div class="mzp-c-hero-image">
        <img src="../../img/image-16-9.jpg" alt="">
    </div>
</section>