Mozilla Protocol
  • 16.1.0

Picto Card: Default

This component is deprecated. Use the Picto component.

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

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