Mozilla Protocol
  • 19.1.0

Columns: Four

The class mzp-t-columns-four sets up a four-column layout. Contents will form two columns in medium viewports or containers, with the third and fourth columns wrapping under the first and second. They will stack in a single column in narrow viewports or containers.

<section class="mzp-l-content mzp-l-columns mzp-t-columns-four">

    <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"></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"></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"></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"></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>