Title

Use title-page for page-level headings and title-section for section-level headings, populated through the heading, description, and action slots.

Autosmmdlgxl

volvocars.com

Show codeHide code

<header class="title-page">
  <h1 slot="heading">Meet the new EX60</h1>
  <p slot="description">
    Crowned Reader's Choice at the 2026 WhatCar Awards, and now available on a
    range of finance options.
  </p>
  <a class="button-text" href="#" slot="action">Explore</a>
</header>

Slots

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

Attribute	Description
slot="heading"	The heading element (h1, h2, etc.)
slot="description"	Supporting text
slot="action"	Optional link or button

Autosmmdlgxl

volvocars.com

Show codeHide code

<div class="title-page">
  <code slot="heading">heading</code>
  <code slot="description">description</code>
  <code slot="action">action</code>
</div>

Heading level

Use title-page with h1 for page titles and title-section with h2 for section headings. Choose the variant and heading level that fits your document outline.

In a page layout

Drop a title directly into a pagelayout or any slot-based layout without extra wrappers. Margins and alignment are handled by the parent.

Accessibility

• Use a semantic heading element in the heading slot and choose its level from the surrounding document outline.
• Use h1 for the page title and the appropriate lower-level heading for a section title.
• Give an action link or button text that clearly describes its destination or result.

CSS reference

Class	Description
title-page	Grid layout for a page-level heading with description and action
title-section	Grid layout for a section-level heading with description and action