Cards - Protocol Design System

Large Card

A large card with image, headline, description, and link.

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

<section
 class="mzp-c-card mzp-c-card-large mzp-has-aspect-16-9">
  <a class="mzp-c-card-block-link" href="#">
    <div class="mzp-c-card-media-wrapper">
      <img class="mzp-c-card-image" src="../../../static/img/card/card-image.png" alt="">
    </div>
    <div class="mzp-c-card-content">
      <div class="mzp-c-card-tag">Card tag</div>
      <h2 class="mzp-c-card-title">This example headline has 40 characters</h2>
      <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
      
    </div>
  </a>
</section>

Notes

Large sized cards display larger text to other card types, as well as larger images.
Large sized cards should contain images with 16:9 or 3:2 aspect ratios only.
Recommended image width is 930px (low-res), 1860px (high-res).
- high-res examples: 16:9 = 1860 x 1046, 3:2 = 1860 x 1240, 1:1 = a bad idea
Headlines should be a maximum of 40 characters, and descriptions a maximum of 140 characters.

Medium Card

A medium card with image, headline, description, and link.

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

A short inline text cta

<section
 class="mzp-c-card mzp-c-card-medium mzp-has-aspect-3-2 mzp-has-video">
  <a class="mzp-c-card-block-link" href="#">
    <div class="mzp-c-card-media-wrapper">
      <img class="mzp-c-card-image" src="../../../static/img/card/card-image.png" alt="">
    </div>
    <div class="mzp-c-card-content">
      <div class="mzp-c-card-tag">Card tag</div>
      <h2 class="mzp-c-card-title">This example headline has 40 characters</h2>
      <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
      <p class="mzp-c-card-cta"><span class="mzp-c-card-cta-text">A short inline text cta</span></p>
    </div>
  </a>
</section>

Notes

Medium sized cards contain larger images but the same sized text as regular cards.
Medium sized cards can contain images with 16:9, 3:2 or 1:1 aspect ratios.
The card in this example displays an icon next to the card tag name, to indicate the media type that may be played on click.
The card in this example includes an optional inline call to action. Inline CTAs should only be used with a description.
Recommended image width is 600px (low-res), 1200px (high-res).
- high-res examples: 16:9 = 1200 x 676, 3:2 = 1200 x 800, 1:1 = 1200 x 1200
Headlines should be a maximum of 40 characters, and descriptions a maximum of 140 characters.

Small Card

A small card with image, headline, description, and link.

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

<section
 class="mzp-c-card mzp-has-aspect-1-1 mzp-has-audio">
  <a class="mzp-c-card-block-link" href="#">
    <div class="mzp-c-card-media-wrapper">
      <img class="mzp-c-card-image" src="../../../static/img/card/card-image.png" alt="">
    </div>
    <div class="mzp-c-card-content">
      <div class="mzp-c-card-tag">Card tag</div>
      <h2 class="mzp-c-card-title">This example headline has 40 characters</h2>
      <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
      
    </div>
  </a>
</section>

Notes

Small sized cards can contain images with 16:9, 3:2 or 1:1 aspect ratios.
The card in this example displays an icon next to the card tag name, to indicate the media type that may be played on click.
Recommended image width is 450px width (low-res), 900px (high-res).
- high-res examples: 16:9 = 900 x 506, 3:2 = 900 x 600, 1:1 = 900 x 900
Headlines should be a maximum of 40 characters, and descriptions a maximum of 140 characters.

Extra Small Card

An extra small card with image, headline, description, and link.

Card tag

Headline that goes onto a second or third line

6 hours ago

<section
 class="mzp-c-card mzp-c-card-extra-small has-aspect-3-2">
  <a class="mzp-c-card-block-link" href="#">
    <div class="mzp-c-card-media-wrapper">
      <img class="mzp-c-card-image" src="../../../static/img/card/card-image.png" alt="">
    </div>
    <div class="mzp-c-card-content">
    <div class="mzp-c-card-tag">Card tag</div>
    <h2 class="mzp-c-card-title">Headline that goes onto a second or third line</h2>
    <p class="mzp-c-card-meta">6 hours ago</p>
    </div>
  </a>
</section>

Notes

The card in this example has a slightly longer title and no description.
Optional card meta data is also displayed to show the time an article was published.
Extra small sized cards should contain images with either 16:9, 3:2 aspect ratios.
Recommended image width is 450px width (low-res), 900px (high-res).
- high-res examples: 16:9 = 900 x 506, 3:2 = 900 x 600, 1:1 = 900 x 900
Headlines should be a maximum of 40 characters, and descriptions a maximum of 140 characters.

Card - Dark mode

A medium card with image, headline, description, and link using the dark mode class .mzp-t-dark.

Card tag

This example headline has 40 characters

A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.

A short inline text cta

<section
 class="mzp-c-card mzp-c-card-medium mzp-t-dark mzp-has-aspect-3-2">
  <a class="mzp-c-card-block-link" href="#">
    <div class="mzp-c-card-media-wrapper">
      <img class="mzp-c-card-image" src="../../../static/img/card/card-image.png" alt="">
    </div>
    <div class="mzp-c-card-content">
      <div class="mzp-c-card-tag">Card tag</div>
      <h2 class="mzp-c-card-title">This example headline has 40 characters</h2>
      <p class="mzp-c-card-desc">A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
      <p class="mzp-c-card-cta"><span class="mzp-c-card-cta-text">A short inline text cta</span></p>
    </div>
  </a>
</section>

Notes

To use dark mode either place the .mzp-t-dark class on the element that contains the .mzp-c-card class or place the card within a container that is using the dark mode class.