Picto Card

deprecated

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 component is deprecated. Use the new Picto component.
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)

deprecated

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

This component is deprecated. Use the new Picto component.
Horizontally aligned icon allows for a larger title and slightly longer description (max 100 characters).