Hero

Text hero

The text hero is a full-height block with the title at the top and body + actions pushed to the bottom. The vertical gap between title and body is flexible. It grows with the element’s height.

Autosmmdlgxl

volvocars.com

Show codeHide code

<section class="text-hero" style="min-height: 740px">
  <h1 slot="title">Care. By Volvo</h1>
  <div slot="body">
    <p>All-electric Volvo EX60</p>
    <p>
      A transparent monthly cost that includes service and financing. Now with
      free home charging.
    </p>
  </div>
  <div slot="action" class="button-group">
    <a class="button-filled" href="#">Choose your EX60</a>
    <a class="button-filled" data-color="subtle" href="#">Read more</a>
  </div>
</section>

Slots

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

• slot="title" - Primary heading
• slot="body" - Supporting text
• slot="action" - Buttons or links

Autosmmdlgxl

volvocars.com

Show codeHide code

<section class="text-hero" style="min-height: 600px">
  <code slot="title">title</code>
  <code slot="body">body</code>
  <code slot="action">action</code>
</section>

Height

The text hero requires explicit height to create the flexible gap between the title and body+action. Without height, the body collapses directly below the title.

The recommended minimum height is 80vh.

Set height via:

• Inline style: min-height: 80vh
• Utility class: min-h-full (inside a sized parent)
• Layout context: when placed in a grid or flex container that assigns height

Media hero

The media hero presents a heading, body text, and action buttons above a full-width media element. On mobile the content stacks vertically; on large screens the heading occupies the left half while body and actions sit on the right.

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

Autosmmdlgxl

volvocars.com

Show codeHide code

<section class="media-hero">
  <h1 slot="title">Care. By Volvo</h1>
  <div slot="body">
    <p>All-electric Volvo EX60</p>
    <p>A transparent monthly cost that includes service and financing.</p>
    <p>Now with free home charging.</p>
  </div>
  <div slot="action" class="button-group">
    <a class="button-filled" href="#">Choose your EX60</a>
    <a class="button-filled" data-color="subtle" href="#">Read more</a>
  </div>
  <img slot="media" src="/images/decorative/ex60-road.avif" alt="" />
</section>

Max width

The media hero keeps its text inset while allowing its media to bleed to the block edges.

The block fills the available width, up to the page layout cap, var(--v-size-pagemax). The heading, body and action content have a var(--v-space-pagemargin) inset on each side, so their frame caps at calc(var(--v-size-pagemax) - 2 * var(--v-space-pagemargin)).

Once the viewport exceeds the page cap, the media bleed decreases until it reaches zero at calc(var(--v-size-pagemax) + 2 * var(--v-space-pagemargin)). The media then aligns with the capped text frame. The outer block stays at its maximum width; the text does not grow to match the media.

Slots

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

• slot="title" - Primary heading
• slot="body" - Supporting text
• slot="action" - Buttons or links
• slot="media" - Image or video

Autosmmdlgxl

volvocars.com

Show codeHide code

<section class="media-hero">
  <code slot="title">title</code>
  <code slot="body">body</code>
  <code slot="action">action</code>
  <div
    slot="media"
    style="aspect-ratio: 1/1"
    class="bg-feedback-gray flex items-center justify-center"
  >
    <code>media</code>
  </div>
</section>

Aspect ratio

The media slot includes responsive default aspect ratios that adapt across breakpoints:

Breakpoint	Aspect ratio	Token
sm	1:1	Square, mobile-optimized
md	3:2	Landscape, tablet
lg, xl	21:9	Desktop

These defaults can be overridden with aspect ratio utility classes on the media element:

<!-- Override to use 16:9 on all breakpoints -->
<img slot="media" class="aspect-16/9" src="…" alt="" />

<!-- Override only on desktop -->
<img slot="media" class="lg:aspect-16/9" src="…" alt="" />

Action buttons

The button-group class provides responsive button layout:

• Buttons sit side by side when there’s enough space
• Buttons grow to full width in containers narrower than 30rem

For the default pairing, use one primary filled button and one subtle filled button:

<div slot="action" class="button-group">
  <a class="button-filled" href="#">Primary action</a>
  <a class="button-filled" data-color="subtle" href="#">Secondary action</a>
</div>

Accessibility

• Use semantic elements: <section> for page sections, <div> when no semantic meaning is needed
• Choose the appropriate heading level (<h1>, <h2>) based on the page hierarchy
• Ensure action links and buttons have meaningful text describing their destination or purpose

CSS reference

Class	Description
text-hero	Root class. Flex column with title at top, body+action pushed to bottom via auto margin.
media-hero	Root class. Single-column grid on mobile, two-column grid on desktop. Content above full-width media.
button-group	Layout class for the action slot. Provides responsive side-by-side button layout.