Mozilla Protocol
  • 19.1.0

Callout: Example

A Callout component is a prominent section of a page that may contain a headline, a description, a CTA button, a logo or wordmark, and an image or video. It’s a generally content-agnostic container with centered content, though shouldn’t be used for long-form content. Text in a Callout is center aligned so it’s best to keep it short.

You can include an image or video with the class mzp-c-callout-media (this just adds a bit of spacing above and below the media).

This component spans the full width of the viewport so a full-bleed background can be applied with either a pre-defined background class or in your local 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

You can set the maximum content width by adding a class to the inner container (mzp-l-content):

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

Notes

The Callout component (without a dash) is a refactor and replacement for the previous Call-out component (with dash), which has been renamed without a dash:

  • New Callout: mzp-c-callout, @import 'components/callout';
  • Old Call-out: mzp-c-call-out, @import 'components/call-out';

Previously there was also a separate Compact Call-out component (mzp-c-call-out-compact). That component has been removed and replaced by a variant layout of Callout using the modifier class mzp-l-compact.

No-nos

This component already has an inner container, so don’t place it inside another mzp-l-content container. The nested spacing will get weird.

<section class="mzp-c-callout mzp-t-background-secondary">
    <div class="mzp-l-content mzp-t-content-md">
        <div class="mzp-c-callout-content">

            <div class="mzp-c-logo mzp-t-logo-lg mzp-t-product-firefox mzp-l-logo-center">Firefox</div>

            <h1 class="mzp-c-callout-title mzp-u-title-2xl">A Prime Example</h1>
            <div class="mzp-c-callout-desc">
                <p>This is an example of a more elaborate Callout component like you might see as a page header or other prominent callout. It features a logo and two short paragraphs as a description, one of which is perhaps a little too long. Centered text is hard to read in large blocks so it‘s best to keep it short.</p>
                <p>It also has a video.</p>
            </div>

            <div class="mzp-c-video mzp-c-callout-media">
                <video controls="controls" width="640" height="360" poster="../../img/video-poster.jpg">
                    <source src="../../video/video.webm" type="video/webm">
                </video>
            </div>

        </div>
    </div>
</section>