Mozilla Protocol
  • 19.0.0

Callout: Compact

An alternative compact layout can be applied with the mzp-l-compact class. This is intended for supplemental callouts or promotional blocks. A Compact Callout places the content and CTA in two columns, aligned left in LTR languages and aligned right for RTL languages. Technically the CTA is still optional in a compact layout, but it leaves empty whitespace.

A Compact Callout spans the full viewport and can result in long line-lengths of the text. It’s often advisable to constrain the width with one of the content width classes (this example uses mzp-t-content-lg).

This example also applies a secondary background color and uses a secondary product themed CTA button.

Notes

The previous Compact Call-out used its own class name, mzp-c-call-out-compact. This is now a variant layout of the Callout component, rather than a separate component with its own name. It uses the modifier class mzp-l-compact.

<section class="mzp-c-callout mzp-l-compact mzp-t-background-secondary">
    <div class="mzp-l-content mzp-t-content-lg">
        <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. This text is left- or right-aligned but should still be short, only a sentence or two.</p>
            </div>
        </div>
        <div class="mzp-c-callout-cta">
            <button class="mzp-c-button mzp-t-product mzp-t-secondary" type="button">Call to Action</button>
        </div>
    </div>
</section>