Mozilla Protocol
  • 16.1.0

Hero: Default

This component is deprecated. You can use the Call-out component in place of a centered Hero, or the Split component in place of a Hero with image.

A Hero is a large promotional section, usually at the very top of the page, featuring at minimum a headline. It should usually also include a call to action and either a tagline or description, occasionally both.

The content is centered by default but can be paired with an image.

No-nos

This component already has an inner container, so don’t place it inside the mzp-l-content container. The nested spacing will get weird.

<section class="mzp-c-hero">
    <div class="mzp-l-content">
        <div class="mzp-c-hero-body">
            <h1 class="mzp-c-hero-title">A Headline With 30 Characters</h1>
            <p class="mzp-c-hero-tagline">A short tagline.</p>

            <div class="mzp-c-hero-desc">
                <p>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>
            </div>

            <p class="mzp-c-hero-cta">
                <button class="mzp-c-button" type="button">Call to Action</button>
            </p>
        </div>
    </div>
</section>