Mozilla Protocol
  • 19.1.0

Feature Card: Default

The horizontal variants for this component are deprecated. Use the Split component instead.

A Feature Card is a large portion of content featuring an image (or video), title, description, and optional CTA link.

Media can be either 16:9 or 3:2 aspect ratios, specified with a modifier class:

  • mzp-has-aspect-16-9
  • mzp-has-aspect-3-2

The default Feature Card displays the media above the text, but there are horizontal variants available with additional 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
<section class="mzp-c-card-feature mzp-has-aspect-16-9">
    <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
            <img class="mzp-c-card-image" src="../../img/image-16-9.jpg" 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">Feature Card title with about 40-50 characters</h2>
            <p class="mzp-c-card-feature-desc">A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like.</p>
            <a href="https://example.com" class="mzp-c-cta-link">Call to action</a>
        </div>
    </div>
</section>