Mozilla Protocol
  • 16.1.0

Hero: Dark

A dark theme is available with the mzp-t-dark theme class. This is example also features an image and brand logo.

<section class="mzp-c-hero mzp-has-image mzp-t-product-nightly mzp-t-dark">
    <div class="mzp-l-content">
        <div class="mzp-c-hero-body">
            <h1 class="mzp-c-hero-title">Dark theme branded hero with image</h1>
            <p class="mzp-c-hero-tagline">Large tagline, no description.</p>

            <p class="mzp-c-hero-cta">
                <button class="mzp-c-button mzp-t-dark" type="button">Call to Action</button>
            </p>
        </div>
    </div>
    <div class="mzp-c-hero-image">
        <img src="../../img/image-3-2.jpg" alt="">
    </div>
</section>