Feature Card

deprecated

A single large feature card with media, headline, description & link.

Feature Card Demo

A headline with 30 characters

A description with a maximum of 100 characters. That usually means only one or two sentences.

<section class="mzp-c-card-feature mzp-has-aspect-3-2 ">
  <div class="mzp-c-card-feature-media-wrapper">
    <div class="mzp-c-card-feature-media">
      <img src="../../../static/img/card/card-image.png" alt="">
    </div>
  </div>
  <div class="mzp-c-card-feature-content">
    <div class="mzp-c-card-feature-content-container">
      <h2 class="mzp-c-card-feature-title">A headline with 30 characters</h2>
      <p class="mzp-c-card-feature-desc">A description with
        a maximum of 100 characters. That usually means only
        one or two sentences.</p>
      <a class="mzp-c-cta-link" href="#">A link for more information</a>
    </div>
  </div>
</section>

Notes

The horizontal variants for this component are deprecated. Use the new Split component instead.
Feature cards have a range of different layout options, including horizontal layout classes (deprecated in favor of Split).
- mzp-l-card-feature-left-half
- mzp-l-card-feature-right-half
- mzp-l-card-feature-left-third
- mzp-l-card-feature-right-third
See the demo page for a full list of examples.