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.


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>

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