A Call-Out is a prominent section of a page that contains at minimum a headline, but also may feature a logo, description, and a call-to-action button. Content is centered.
Product logos can be displayed using an additional theme class:
This component spans the full width of the viewport. It has a secondary background
color by default and a dark theme is available with the class
This component already has an inner container, so don’t place it inside
mzp-l-content container. The nested
spacing will get weird.
<section class="mzp-c-call-out"> <div class="mzp-l-content"> <h2 class="mzp-c-call-out-title">A Headline With 30 Characters</h2> <div class="mzp-c-call-out-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><a class="mzp-c-button" href="#">Call to Action</a></p> </div> </section>