Mozilla Protocol
  • 22.0.0

Card: Extra Small

  • 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 (low-res), 900px (high-res).
    • high-res examples: 16:9 = 900px x 506px, 3:2 = 900px x 600px, 1:1 = 900px x 900px
  • Headlines should be a maximum of 50 characters, and descriptions a maximum of 150 characters.
<section class="mzp-c-card mzp-c-card-extra-small has-aspect-3-2">
    <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">Card tag</div>
            <h2 class="mzp-c-card-title">A slightly longer card title with about 55 characters</h2>

            <p class="mzp-c-card-meta">6 hours ago</p>
        </div>
    </a>
</section>