Call Out

A vertical call out section containing a logo, headline, description and a call-to-action button.

Call Out Demo

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.

Download Firefox Firefox Privacy Notice

<section class="mzp-c-call-out ">
  <div class="mzp-l-content ">
    <h2 class="mzp-c-call-out-title">A headline with 30 characters</h2>
    <p class="mzp-c-call-out-desc">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>

    <div class="mzp-c-button-download-container">
      <a href="#" class="mzp-c-button mzp-t-product ">
    Download Firefox
  </a>
      <small class="mzp-c-button-download-privacy-link">
    <a href="https://www.mozilla.org/privacy/firefox/">Firefox Privacy Notice</a>
  </small>
    </div>

  </div>
</section>

Notes

Product icons can be displayed using an additional theme class:
- mzp-t-product-firefox
- mzp-t-product-beta
- mzp-t-product-developer
- mzp-t-product-nightly
- mzp-t-product-focus
- mzp-t-product-mozilla
- mzp-t-product-vpn
- mzp-t-product-pocket
A dark theme is also available using the theme class mzp-t-dark.

No-nos

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

Call Out (compact)

A more compact version of a call out section, with smaller copy and a horizontal layout.

Compact Call Out Demo

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.

Download Firefox Firefox Privacy Notice

<section class="mzp-c-call-out-compact ">
  <div class="mzp-l-content">
    <div class="mzp-c-call-out-content">
      <div class="mzp-c-call-out-container">
        <h2 class="mzp-c-call-out-title">A headline with 30 characters</h2>
        <p class="mzp-c-call-out-desc">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>
      </div>
    </div>
    <div class="mzp-c-call-out-cta">
      <div class="mzp-c-call-out-cta-container">

        <div class="mzp-c-button-download-container">
          <a href="#" class="mzp-c-button mzp-t-product ">
    Download Firefox
  </a>
          <small class="mzp-c-button-download-privacy-link">
    <a href="https://www.mozilla.org/privacy/firefox/">Firefox Privacy Notice</a>
  </small>
        </div>

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

Notes

For RTL languages, the content and call-to-action will swap positions.
Product icons can be displayed using an additional theme class:
- mzp-t-product-firefox
- mzp-t-product-beta
- mzp-t-product-developer
- mzp-t-product-nightly
- mzp-t-product-focus
- mzp-t-product-mozilla
- mzp-t-product-vpn
- mzp-t-product-pocket