components/callout/callout--example.html

<section class="mzp-c-callout mzp-t-background-secondary">
  <div class="mzp-l-content mzp-t-content-md">
    <div class="mzp-c-callout-content">
      {% render '@logo', { product: 'firefox', size: 'lg', label: 'Firefox', layout: 'mzp-l-logo-center' }  %}
      <h1 class="mzp-c-callout-title mzp-u-title-2xl">A Prime Example</h1>
      <div class="mzp-c-callout-desc">
        <p>This is an example of a more elaborate Callout component like you might see as a page header or other prominent callout. It features a logo and two short paragraphs as a description, one of which is perhaps a little too long. Centered text is hard to read in large blocks so it‘s best to keep it short.</p>
        <p>It also has a video.</p>
      </div>
      {% render '@video', { class: 'mzp-c-callout-media' } %}
    </div>
  </div>
</section>