Banner

Banners are full-width content blocks used for promotional or editorial messaging. Use text-banner for text-only layouts or media-banner when pairing content with an image.

Text banner

The text banner arranges content in a single column on mobile and splits into two columns on large screens. It uses a secondary background to visually separate the banner from surrounding content.

Use a semantic <article> element (or <section>, <div>) as the root.

Auto sm md lg xl

volvocars.com

<article class="text-banner">
  <div class="flex-col gap-8">
    <h2 slot="title">Lease your new EX60</h2>
    <p slot="subtitle">from 7 790 kr / month</p>
  </div>
  <div class="flex-col gap-8">
    <p slot="body">
      With our Lease option, you lease the Volvo of your choice for a fixed
      contract period, then return the car to us at the end.
    </p>
    <a class="link-underlined" slot="action" href="#">Explore</a>
  </div>
</article>

Slots

This component uses slots to give content built-in styling.

• slot="title" – Primary heading
• slot="subtitle" – Secondary text
• slot="body" – Supporting text
• slot="action" – Link or button

Auto sm md lg xl

volvocars.com

<section class="text-banner">
  <div class="flex-col gap-8">
    <code slot="title">title</code>
    <code slot="subtitle">subtitle</code>
  </div>
  <div class="flex-col gap-8">
    <code slot="body">body</code>
    <code slot="action">action</code>
  </div>
</section>

Group title and subtitle in one container, and body and action in another, to get the two-column layout on large screens:

Media banner

The media banner pairs an image with text content. On mobile the image stacks above the content; on large screens they sit side by side at 50/50 width.

Auto sm md lg xl

volvocars.com

<article class="media-banner">
  <img
    slot="media"
    class="aspect-1/1 md:aspect-16/9 lg:aspect-3/2 xl:aspect-16/9"
    src="/images/decorative/ex90-clay-model.avif"
    alt=""
    style="object-position: 25% center"
  />
  <div slot="content">
    <h2 slot="title">
      The Volvo way. Every car begins life as a lump of clay.
    </h2>
    <p slot="subtitle">The art behind the design</p>
    <p slot="body">
      Clay models have been used in the car industry for nearly 100 years, few
      people know the technique. It's a secretive craft. The beautiful clay cars
      carefully sculpted at Volvo Cars are rarely shown in public.
    </p>
    <a class="link-underlined" slot="action" href="#">Read article</a>
  </div>
</article>

Expand code Collapse code

The media slot defaults to a 1 / 1 aspect ratio. Override it with aspect ratio utility classes on the media element (e.g. aspect-16/9, aspect-3/2).

Slots

This component uses slots to give content built-in styling.

• slot="media" – Image or video
• slot="content" – Wrapper for the text content area
• slot="title" – Primary heading
• slot="subtitle" – Secondary text
• slot="body" – Supporting text
• slot="action" – Link or button

Auto sm md lg xl

volvocars.com

<section class="media-banner">
  <div
    slot="media"
    class="bg-feedback-gray flex items-center justify-center h-full"
  >
    <code>media</code>
  </div>
  <div slot="content">
    <code slot="title">title</code>
    <code slot="subtitle">subtitle</code>
    <code slot="body">body</code>
    <code slot="action">action</code>
  </div>
</section>

Content-first layout

Use lg:flex-row-reverse to visually place content before the image on large screens while keeping the image first in DOM order for accessibility and mobile layout.

Auto sm md lg xl

volvocars.com

<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>

Expand code Collapse code

Accessibility

• Use semantic elements: <article> wraps self-contained content, <section> for thematic grouping
• Provide descriptive alt text for images, or use alt="" for purely decorative images
• Ensure action links have meaningful text that describes the destination
• The text banner heading (slot="title") should use the appropriate heading level for the page hierarchy

CSS reference

Class	Description
text-banner	Text-only banner with secondary background. Two-column layout on large screens.
media-banner	Image-and-text banner. Stacked on mobile, side-by-side 50/50 on large screens.