Picto

Picto

A small block of content featuring a pictographic icon, headline, and body.

A headline with 30 characters

A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.

<section class="mzp-c-picto">
  <div class="mzp-c-picto-image">
    <img src="../../../static/img/picto/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>

Notes

  • Pictos are best suited for a multi-column layout but will otherwise stack in a single column.
  • Without any other constraints, a picto has a maximum width of 688px (equal to the "medium" content width).
  • The image should usually be a small icon (hence "picto") but larger images or even videos can be accommodated in some layouts.
  • Three variants are available:
    • The image on top, aligned with the text (this is the default).
    • The image on top with text and image centered.
    • The image on one side, aligned to the top of the text.
  • The picto variant is determined by a theme class on a container element so the same variant applies to the entire set:
    • The default (image on top, aligned with text) doesn't require a theme class.
    • mzp-t-picto-center
    • mzp-t-picto-side
  • All parts are optional. For example, you could omit the headline and only use body text, or omit the body and only have a headline. Technically you could omit the image but then you might prefer some other component (is a picto without a picto really a picto?).

Tips

  • This component should typically appear in groups of at least two. A single picto should be an uncommon exception.
  • All the images in a set of pictos should be the same size so they'll all align neatly.

No-nos

  • Avoid mismatching the number of picto components to the number of columns, e.g. four pictos in a three-column layout. It won't break, but the fourth one will wrap to another line and leave awkward empty space.
  • Don't combine style variants; centered text with the image on the side doesn't look quite right.

Picto, image on the side

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

A headline with 30 characters

A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.

<div class="mzp-t-picto-side">

  <section class="mzp-c-picto">
    <div class="mzp-c-picto-image">
      <img src="../../../static/img/picto/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>

Notes

  • 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.

Picto, centered

A picto with the image and text centered.

A headline with 30 characters

A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.

<div class="mzp-t-picto-center">

  <section class="mzp-c-picto">
    <div class="mzp-c-picto-image">
      <img src="../../../static/img/picto/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>