Mozilla Protocol
  • 19.1.0

Card Layout: Hero

The class mzp-l-card-hero sets up a five-card layout with one large hero card.

  • In small viewports cards stack vertically and span the full container width.
  • In medium sized viewports the first card spans the full width and the remaining four cards each span half widths.
  • In large viewports the first card spans two thirds and the remaining cards each span one third.

The first card in this arrangement should be large sized with a 16:9 aspect ratio image. The other cards should all be small sized.

<div class="mzp-l-content mzp-l-card-hero">

    <section class="mzp-c-card mzp-c-card-large mzp-has-aspect-16-9">
        <a class="mzp-c-card-block-link" href="#">
            <div class="mzp-c-card-media-wrapper">
                <img class="mzp-c-card-image" src="../../img/image-16-9.jpg" alt="">
            </div>
            <div class="mzp-c-card-content">

                <h2 class="mzp-c-card-title">A large hero card</h2>
                <p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>

            </div>
        </a>
    </section>

    <section class="mzp-c-card mzp-has-aspect-1-1">
        <a class="mzp-c-card-block-link" href="#">
            <div class="mzp-c-card-media-wrapper">
                <img class="mzp-c-card-image" src="../../img/image-1-1.jpg" alt="">
            </div>
            <div class="mzp-c-card-content">

                <h2 class="mzp-c-card-title">A short title</h2>
                <p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>

            </div>
        </a>
    </section>

    <section class="mzp-c-card mzp-has-aspect-3-2">
        <a class="mzp-c-card-block-link" href="#">
            <div class="mzp-c-card-media-wrapper">
                <img class="mzp-c-card-image" src="../../img/image-3-2.jpg" alt="">
            </div>
            <div class="mzp-c-card-content">

                <h2 class="mzp-c-card-title">A short title</h2>
                <p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>

            </div>
        </a>
    </section>

    <section class="mzp-c-card mzp-has-aspect-3-2">
        <a class="mzp-c-card-block-link" href="#">
            <div class="mzp-c-card-media-wrapper">
                <img class="mzp-c-card-image" src="../../img/image-3-2.jpg" alt="">
            </div>
            <div class="mzp-c-card-content">

                <h2 class="mzp-c-card-title">A short title</h2>
                <p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>

            </div>
        </a>
    </section>

    <section class="mzp-c-card mzp-has-aspect-3-2">
        <a class="mzp-c-card-block-link" href="#">
            <div class="mzp-c-card-media-wrapper">
                <img class="mzp-c-card-image" src="../../img/image-3-2.jpg" alt="">
            </div>
            <div class="mzp-c-card-content">

                <h2 class="mzp-c-card-title">A short title</h2>
                <p class="mzp-c-card-desc">A brief card description, just a single sentence.</p>

            </div>
        </a>
    </section>

</div>