Picto Card

Picto Card

A card with a pictographic icon, headline, and description.

A headline with 30 characters

A short description with a maximum of about 60 characters.

<section class="mzp-c-card-picto ">
  <div class="mzp-c-card-picto-content">
    <h2 class="mzp-c-card-picto-title">A headline with 30 characters</h2>
    <p class="mzp-c-card-picto-desc">A short description with a maximum of about 60 characters.</p>
  </div>
</section>

Notes

  • This card type should be arranged in groups of two or three using the .mzp-l-card-half and .mzp-l-card-third layout classes.
  • Icons are presentational so should be applied as CSS background images via a .mzp-c-card-picto-content::before pseudo class.
  • Headlines should be a maximum of 30 characters, and descriptions a maximum of 60 characters.
  • A .mzp-t-dark theme color is supported for use on different color backgrounds.
  • Icon size is 56px x 56px.

Picto Card (compact)

A more compact version of a Picto Card with a horizontally aligned icon.

A headline with 30 characters

A description with a maximum of 100 characters. That usually means only one or two sentences.

<section class="mzp-c-card-picto mzp-c-card-picto-compact">
  <div class="mzp-c-card-picto-content">
    <h2 class="mzp-c-card-picto-title">A headline with 30 characters</h2>
    <p class="mzp-c-card-picto-desc">A description with a maximum of 100 characters. That usually
      means only one or two sentences.</p>
  </div>
</section>

Notes

  • Horizontally aligned icon allows for a larger title and slightly longer description (max 100 characters).