Mozilla Protocol
  • 16.1.0

Split: Wide Body

Add the class mzp-l-split-body-wide to the outer container (mzp-c-split) to make the body 2/3rds width and the media 1/3rd.

Note these proportions only appear in wider viewports. It will still be 50/50 in medium viewports and stacked in narrow viewports.

<section class="mzp-c-split mzp-l-split-body-wide">
    <div class="mzp-c-split-container">
        <div class="mzp-c-split-body ">

            <h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
            <p><button class="mzp-c-button" type="button">Call to action</button></p>

        </div>
        <div class="mzp-c-split-media ">
            <img class="mzp-c-split-media-asset" src="../../img/image-16-9.jpg" alt="" srcset="../../img/image-16-9-high-res.jpg 2x">
        </div>
    </div>
</section>