Billboard

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

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

Billboard Demo

Example headline with 35 characters

A description with a maximum of 100 characters. That usually means only one or two sentences.

<div class="mzp-c-billboard mzp-l-billboard-right">
  <div class="mzp-c-billboard-image-container">
    <img class="mzp-c-billboard-image" src="../../../static/img/billboard/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 class="mzp-c-cta-link" href="#">Learn more about us</a>
      </div>
    </div>
  </div>
</div>

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.