Mozilla Protocol
  • 22.0.0

Card: Dark Theme

Cards will inherit a dark theme from an ancestor with the class mzp-t-dark.

<section class="mzp-c-card mzp-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-heading">Card heading with about 30-40 characters</h2>
      <p class="mzp-c-card-body">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>
      <p class="mzp-c-card-meta">Card meta info</p>
    </div>
  </a>
</section>