Call Out

Call Out

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

A headline with 30 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

<section class="mzp-c-call-out mzp-t-product-firefox mzp-t-firefox">
  <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. That means
      we usually only have room for one or two sentences. Here
      is what that looks like.</p>

    <div class="mzp-c-button-download-container">
      <a href="#" class="mzp-c-button mzp-t-download ">
    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 classes.
    • mzp-t-product-firefox.
    • mzp-t-product-beta.
    • mzp-t-product-developer.
    • mzp-t-product-nightly.
    • mzp-t-product-focus.
  • Adding a theme class of mzp-t-firefox will render the title font using Open Sans.
  • A dark theme is also available using the theme class mzp-t-dark.

Call Out (compact)

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

A headline with 30 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

<section class="mzp-c-call-out-compact mzp-t-product-firefox mzp-t-firefox">
  <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. That
          means we usually only have room for one or two sentences.
          Here is what that looks like.</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-download ">
    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

  • Adding a theme class of mzp-t-firefox will render the title font using Open Sans.
  • For RTL languages, the content and call-to-action will swap positions.