Mozilla Protocol
  • 19.1.0

Callout: Content Width

Adding one of our standard content width classes to the inner container (mzp-l-content) will apply that width constraint, though the outer component still spans the viewport.

  • mzp-t-content-sm
  • mzp-t-content-md
  • mzp-t-content-lg
  • mzp-t-content-xl

This example also has a tertiary background color and an image.

<section class="mzp-c-callout mzp-t-background-tertiary">
    <div class="mzp-l-content mzp-t-content-sm">
        <div class="mzp-c-callout-content">
            <h1 class="mzp-c-callout-title">A Headline With 30 Characters</h1>
            <div class="mzp-c-callout-desc">
                <p>A description of about 150 characters, give or take. Because this text is centered it works best with a tagline or brief intro, just a sentence or two.</p>
            </div>

            <img class="mzp-c-callout-media" src="../../img/image-3-2.jpg" alt="">
        </div>
    </div>
</section>