Cards

Large Card

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

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

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

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

<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).
  • Headlines should be a maximum of 40 characters, and descriptions a maximum of 140 characters.