Mozilla Protocol
  • 22.0.0

Split: Body Alignment

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

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

  • 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 horizontal position does not reverse in a reversed layout ( mzp-l-split-reversed).
  • The vertical position is only effective if the body’s height is less than the media height.
<section class="mzp-c-split "><div class="mzp-c-split-container">
    <div class="mzp-c-split-body mzp-l-split-h-end mzp-l-split-v-end">
    
      <h1 class="mzp-u-heading-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><a class="mzp-c-button" href="#">Call to action</a></p>
    
    </div>
    <div class="mzp-c-split-media ">
    <img class="mzp-c-split-media-asset" src="../../img/image-portrait.jpg" alt="">
    </div>
  </div></section>