Mozilla Protocol
  • 22.0.0

Picto: Side

A Picto component with the image oriented to one side of the content, with a bit of space in between.

  • The class mzp-t-picto-side on a container element will apply this styling to all the pictos in the set.
  • In this orientation the image has a maximum width of 64px, so it’s best suited for simple icons.
  • The image will be on the left in left-to-right languages and on the right in right-to-left.
  • The image is vertically aligned to the top of the text.

No-nos:

This style works best in wider columns, allowing space for the image and text. Don’t use it in a very narrow container, such as a four-column layout.

<div class="mzp-t-picto-side">
  
<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>

</div>