By default the copy is on the left and image on the right. Reverse the layout
mzp-l-reverse class. In a reverse layout the image can overflow to the
left, hiding some of the image. Plan for this and choose your image wisely.
The image and copy switch sides in RTL languages.
mzp-l-reverse class has no effect on a centered Hero (without an image).
<section class="mzp-c-hero mzp-has-image mzp-l-reverse"> <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"> <button class="mzp-c-button" type="button">Call to Action</button> </p> </div> </div> <div class="mzp-c-hero-image"> <img src="../../img/image-16-9.jpg" alt=""> </div> </section>