Split

Split

Split a row into text and a single piece of media (image or video).

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Call to action

<section class="mzp-c-split ">

  <div class="mzp-c-split-container">
    <div class="mzp-c-split-body ">
      <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1>
      <p>A description with a maximum of 140 characters and
        <a href="#">a link</a>. That means we usually only
        have room for one or two sentences. Like this.</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="../../../static/img/split/devices.png" alt="" srcset="../../../static/img/split/devices-high-res.png 2x">
    </div>
  </div>

</section>

Notes

  • Highly customizable positioning options
    • layout sizing classes: (50/50 even by default), mzp-l-split-body-narrow, mzp-l-split-body-wide
    • layout positioning classes: mzp-l-split-reversed
    • body positioning classes: (horizontally left aligned by default), mzp-l-split-h-center, mzp-l-split-h-end, mzp-l-split-v-start, (vertically centered by default), mzp-l-split-v-end
    • media sizing classes: mzp-l-split-media-overflow, mzp-l-split-media-constrain-height
    • media positioning classes: (horizontally left aligned by default), mzp-l-split-h-center, mzp-l-split-h-end, mzp-l-split-v-start, (vertically centered by default), mzp-l-split-v-end
      • note that the media can only be positioned horizontally if it does not have a sizing class added
      • "pop" the media out of the container with: mzp-l-split-pop-top, mzp-l-split-pop-bottom, mzp-l-split-pop
    • mobile display classes: mzp-l-split-center-on-sm-md, mzp-l-split-hide-media-on-sm-md
  • No default typography styles are applied to the body text; use atoms to achieve the desired content and appearance.
  • See the demo page for more examples in a full window context.

Themes

Theme the Split by wrapping a div with the class mzp-c-split-bg around the container.

Then add any of the theme classes: mzp-t-background-alt, mzp-t-dark, or mzp-t-dark & mzp-t-background-alt.

A Headline With 30 Characters

A description with a maximum of 140 characters and a link. That means we usually only have room for one or two sentences. Like this.

Call to action

<section class="mzp-c-split ">
  <div class="mzp-c-split-bg mzp-t-dark">
    <div class="mzp-c-split-container">
      <div class="mzp-c-split-body ">
        <h1 class="mzp-u-title-md">A Headline With 30 Characters</h1>
        <p>A description with a maximum of 140 characters
          and <a href="#">a link</a>. That means we usually
          only have room for one or two sentences. Like
          this.</p>
        <p>
          <a class="mzp-c-button mzp-t-dark" href="#">Call to action</a>
        </p>
      </div>
      <div class="mzp-c-split-media ">
        <img class="mzp-c-split-media-asset" src="../../../static/img/split/devices.png" alt="" srcset="../../../static/img/split/devices-high-res.png 2x">
    </div>
    </div>
  </div>
</section>