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

  • 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 (but is a Picto without a picto really a Picto?).

Tips

  • This component should typically appear in groups of at least two. A single Picto is feasible but should be an uncommon exception.
  • All the images in a set of Pictos should be the same height 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.
<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>