Mozilla Protocol
  • 22.0.0

Columns: Two

The class mzp-t-columns-two sets up a two-column layout. Contents will stack in a single column in narrow viewports or containers.

<section class="mzp-l-content mzp-l-columns mzp-t-columns-two">
  
<section class="mzp-c-picto">
  <div class="mzp-c-picto-image">
    <img src="../../protocol/img/icons/image.svg" width="64" alt="">
  </div>
  <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3>
  <div class="mzp-c-picto-body">
    <p>A short description, just a sentence or two. Don’t use this component for long-form content; it’s only for blurbs.</p>
  </div>
  </section>

  
<section class="mzp-c-picto">
  <div class="mzp-c-picto-image">
    <img src="../../protocol/img/icons/image.svg" width="64" alt="">
  </div>
  <h3 class="mzp-c-picto-heading">A headline with 30 characters</h3>
  <div class="mzp-c-picto-body">
    <p>A short description, just a sentence or two. Don’t use this component for long-form content; it’s only for blurbs.</p>
  </div>
  </section>

</section>