Mozilla Protocol
  • 16.1.0

Split: Media Alignment

Align the media in different positions, horizontally and vertically (it’s aligned left by default in LTR languages, and vertically centered).

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

  • mzp-l-split-h-center - horizontally centered.
  • mzp-l-split-h-end - aligned right in left-to-right languages, left in right-to-left.
  • mzp-l-split-v-start - vertically aligned to the top.
  • mzp-l-split-v-end - vertically aligned to the bottom.

Tips:

  • The media can only be positioned horizontally if it is not allowed to overflow by an mzp-l-split-media-overflow or mzp-l-split-media-constrain-height class.
  • The vertical position is only effective if the media’s height is less than the body height. Taller images will scale to fit.
<section class="mzp-c-split ">
    <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 mzp-l-split-h-end mzp-l-split-v-end">
            <img class="mzp-c-split-media-asset" src="../../img/image-1-1-sm.jpg" alt="">
        </div>
    </div>
</section>