Mozilla Protocol
  • 19.1.0

Card: Medium

  • 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 = 1200px x 676px, 3:2 = 1200px x 800px, 1:1 = 1200px x 1200px
  • Headlines should be a maximum of 50 characters, and descriptions a maximum of 150 characters.
<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="https://example.com">
        <div class="mzp-c-card-media-wrapper">
            <img class="mzp-c-card-image" src="../../img/image-3-2.jpg" alt="">
        </div>
        <div class="mzp-c-card-content">
            <div class="mzp-c-card-tag">Video</div>
            <h2 class="mzp-c-card-title">Card title with about 30-40 characters</h2>
            <p class="mzp-c-card-desc">A description of about 150 characters, give or take. 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">Call to action</span></p>

        </div>
    </a>
</section>