Mozilla Protocol
  • 19.1.0

Feature Card: Left Third

Add the class mzp-l-card-feature-left-half to arrange the text on the left side, one third the width of the container.

This variant is deprecated. Use Split instead.

<section class="mzp-c-card-feature mzp-l-card-feature-left-third mzp-has-aspect-3-2">
    <div class="mzp-c-card-feature-media-wrapper">
        <div class="mzp-c-card-feature-media">
            <img class="mzp-c-card-image" src="../../img/image-3-2.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>