Mozilla Protocol
- 19.1.0
-
The class mzp-l-card-third sets up a three-column layout so cards should
come in multiples of three to avoid empty spaces when cards wrap to new rows.
At some medium breakpoints the layout will form two columns and an empty space
may be unavoidable. This layout really works best with six cards so it avoids
gaps at all widths (two rows of three or three rows of two).
Tips
- Use small sized cards.
- Avoid using a three-column layout in narrow containers.
<div class="mzp-l-content mzp-l-card-third">
<section class="mzp-c-card 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="../../img/image-3-2.jpg" alt="">
</div>
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">A short title</h2>
<p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>
</div>
</a>
</section>
<section class="mzp-c-card mzp-has-aspect-1-1">
<a class="mzp-c-card-block-link" href="#">
<div class="mzp-c-card-media-wrapper">
<img class="mzp-c-card-image" src="../../img/image-1-1.jpg" alt="">
</div>
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">A short title</h2>
<p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>
</div>
</a>
</section>
<section class="mzp-c-card 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="../../img/image-3-2.jpg" alt="">
</div>
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">A short title</h2>
<p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>
</div>
</a>
</section>
</div>