Card Layout

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
This is placeholder card content
This is placeholder card content
This is placeholder card content
This is placeholder card content
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.