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> </div> <p class="mzp-c-hero-cta"> <button class="mzp-c-button" type="button">Call to Action</button> </p> </div> </div> </section>