Mozilla Protocol
  • 19.1.0

Split: Background

The Split component can include an extra inner wrapper element to carry a background (it needs this inner container to allow the media to overflow beyond the background area while preserving vertical spacing. See the Pop-out Media variation).

The wrapper element has the class mzp-c-split-bg and you can add any of the standard background classes or apply your own CSS:

  • Secondary: mzp-t-background-secondary
  • Tertiary: mzp-t-background-tertiary
  • Dark: mzp-t-dark
  • Secondary dark: mzp-t-dark mzp-t-background-secondary
  • Tertiary dark: mzp-t-dark mzp-t-background-tertiary

To make the background butt against the content above or below the Split, without additional vertical spacing, add the class mzp-t-split-nospace to the outer container (mzp-c-split). This is especially useful when using Split as a hero section at the very top of a page, or if you have a stack of splits with alternating background colors. Note that images can’t “pop out” of a Split without that additional space, so the nospace and pop variations are incompatible.

<section class="mzp-c-split ">
    <div class="mzp-c-split-bg mzp-t-dark mzp-t-background-secondary">
        <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><a class="mzp-c-button mzp-t-dark">Call to Action</a></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>
    </div>
</section>