Hero

Heroes are full-width blocks for prominent page-level messaging. Use text-hero for text-only layouts or media-hero when pairing content with an image or video.

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.

Auto sm md lg xl

volvocars.com

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

Auto sm md lg xl

volvocars.com

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

Auto sm md lg xl

volvocars.com

<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-outlined" href="#">Read more</a>
  </div>
  <img slot="media" src="/images/decorative/ex60-road.avif" alt="" />
</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
• slot="media" - Image or video

Auto sm md lg xl

volvocars.com

<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

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.