Add the mzp-has-image
class to change the layout for a hero image. The copy
and image stack vertically on small screens and appear side by side on larger
screens.
Hero images can overflow their container, with part of one side hidden off-screen at some screen sizes. This is by design and this component was intended for decorative, editorial-style images not essential content. If you expect the entire hero image to be visible, this isn’t the right component to use. It’s one reason this component has been deprecated in favor of the Split component.
mzp-l-reverse
class.
<section class="mzp-c-hero mzp-has-image">
<div class="mzp-l-content">
<div class="mzp-c-hero-body">
<h1 class="mzp-c-hero-title">A Headline With 30 Characters</h1>
<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">
<a class="mzp-c-button" href="https://example.com">Call to Action</a>
</p>
</div>
</div>
<div class="mzp-c-hero-image">
<img src="../../img/image-3-2.jpg" alt="">
</div>
</section>