Mozilla Protocol
  • 19.1.0

Billboard

A billboard style call-out with an image, text and link.

The image and copy stack vertically on small screens, and run full-width horizontally on larger screens.

Tips:

  • Use the layout classes mzp-l-billboard-left or mzp-l-billboard-right to indicate the layout.
  • The layout is not reversed in right to left (RTL) languages, since text is already centered and images may prefer a particular orientation.
  • Image should be 346px in width and 346px in height.
  • Headlines should be a maximum of 35 characters, and description should be a maximum of 100 characters.
<div class="mzp-c-billboard mzp-l-billboard-right">
    <div class="mzp-c-billboard-image-container">
        <img class="mzp-c-billboard-image" src="../../img/billboard-image.png" alt="">
    </div>
    <div class="mzp-c-billboard-content">
        <div class="mzp-c-billboard-content-container">
            <div class="mzp-c-billboard-content-inner">
                <h2 class="mzp-c-billboard-title">Example headline with 35 characters</h2>
                <p class="mzp-c-billboard-desc">A description with a maximum of 100 characters. That usually means only one or two sentences.</p>

                <a href="#" class="mzp-c-cta-link">Learn more</a>
            </div>
        </div>
    </div>
</div>