Mozilla Protocol
  • 16.1.0

Split: Pop Out Media

Ordinarily the top and bottom edges of the media align with the body text. Alternatively, the media can “pop” out of its container in larger viewports, protruding a fixed distance beyond the top and/or bottom edges of the body. The protrusion corresponds to the vertical padding of the outer container so the media won’t overlap adjacent content. Note that images can’t “pop out” of a Split without that additional space so this is incompatible with the mzp-t-split-nospace class.

Apply these classes to the outer container (mzp-c-split):

  • mzp-l-split-pop-top - protrude past the top.
  • mzp-l-split-pop-bottom - protrude past the bottom.
  • mzp-l-split-pop - both.

Tips:

  • The media only protrudes if it exceeds the height of the body.
  • This only takes effect in larger viewports. The media will fit within the container in medium viewports and will stack in smaller viewports.
<section class="mzp-c-split mzp-l-split-pop">
    <div class="mzp-c-split-bg mzp-t-background-tertiary">
        <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-1-1.jpg" alt="">
            </div>
        </div>
    </div>
</section>