Card Layout

A layout class for displaying card components in different arrangements.

All cards stack vertically on small screens but can adapt to different grid formations on wider screens.

This is placeholder card content

<div class="mzp-l-content mzp-l-card-third">
  <section class="mzp-c-card">
    This is placeholder card content
  </section>

  <section class="mzp-c-card">
    This is placeholder card content
  </section>

  <section class="mzp-c-card">
    This is placeholder card content
  </section>

  <section class="mzp-c-card">
    This is placeholder card content
  </section>

  <section class="mzp-c-card">
    This is placeholder card content
  </section>

  <section class="mzp-c-card">
    This is placeholder card content
  </section>
</div>

Notes

This layout template only sets up the basic grid for each type of layout.

Tips

Use the following CSS classes to indicate the layout type.
- mzp-l-card-hero
- mzp-l-card-half
- mzp-l-card-third
- mzp-l-card-quarter
These CSS classes can be applied to any suitable parent element e.g. <main>, <section>, <div>.
The grid layout is reversed in right to left (RTL) languages.
If using the mzp-l-card-hero parent class, make sure to indicate which child card element is to be the large hero card by giving it a mzp-c-card-large class.