Mozilla Protocol
  • 16.1.0

Compact Call Out: Default

Similar to the Call-Out component, this is a more compact section with smaller copy and a horizontal layout. It features at minimum a headline and a call to action. The content and call to action swap positions in RTL languages.

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

This component spans the full width of the viewport. It has a secondary background color by default and a dark theme is available with the 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.

<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>
                <div class="mzp-c-call-out-desc">
                    <p>A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
                </div>
            </div>
        </div>
        <div class="mzp-c-call-out-cta">
            <div class="mzp-c-call-out-cta-container">
                <button class="mzp-c-button" type="button">Call to Action</button>
            </div>
        </div>
    </div>
</section>