Banner

Banner is a full-width content block used to drive attention to a specific product, page, offer, or key update.

@volvo-cars/css v3.1.0

Content-first media banner

volvocars.com

Show codeHide code

<article class="media-banner lg:flex-row-reverse">
  <img
    slot="media"
    class="aspect-1/1 md:aspect-16/9 lg:aspect-3/2 xl:aspect-16/9"
    src="/images/decorative/ex60-tailgate.avif"
    alt=""
    style="object-position: 75% center"
  />
  <div slot="content">
    <h2 slot="title">The new EX60.</h2>
    <p slot="subtitle">Arriving in January</p>
    <p slot="body">
      Be among the first to experience the Volvo EX60 with exclusive updates.
    </p>
    <a class="link-underlined" slot="action" href="#">Explore</a>
  </div>
</article>