Mozilla Protocol
  • 22.0.0

Card Layout: Quarter

The class mzp-l-card-quarter sets up a four-column layout so cards should come in multiples of four to avoid empty spaces when cards wrap to new rows.

Tips

  • Use small sized cards.
  • Avoid using a four-column layout in narrow containers.
<div class="mzp-l-content mzp-l-card-quarter">
 
<section class="mzp-c-card mzp-c-card-small 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-heading">A short heading</h2>
      <p class="mzp-c-card-body">A brief card description, just a single sentence.</p>
      
      
    </div>
  </a>
</section>

 
<section class="mzp-c-card mzp-c-card-small 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-heading">A short heading</h2>
      <p class="mzp-c-card-body">A brief card description, just a single sentence.</p>
      
      
    </div>
  </a>
</section>

 
<section class="mzp-c-card mzp-c-card-small 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-heading">A short heading</h2>
      <p class="mzp-c-card-body">A brief card description, just a single sentence.</p>
      
      
    </div>
  </a>
</section>

 
<section class="mzp-c-card mzp-c-card-small 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-heading">A short heading</h2>
      <p class="mzp-c-card-body">A brief card description, just a single sentence.</p>
      
      
    </div>
  </a>
</section>

</div>