Title

@volvo-cars/css v2.3.0

Title arranges a heading, description, and optional action into a consistent layout. Use title-page for page-level headings and title-section for section-level headings.

volvocars.com

<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

volvocars.com

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

Without action:

Meet the new EX60

Crowned Reader's Choice at the 2026 WhatCar Awards, and now available on a range of finance options.

<header class="title-section">
  <h2 slot="heading">Meet the new EX60</h2>
  <p slot="description">
    Crowned Reader's Choice at the 2026 WhatCar Awards, and now available on a
    range of finance options.
  </p>
</header>

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.

title-page — page title:

Meet the new EX60

Crowned Reader's Choice at the 2026 WhatCar Awards, and now available on a range of finance options.

Explore

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

title-section — section heading:

Meet the new EX60

Crowned Reader's Choice at the 2026 WhatCar Awards, and now available on a range of finance options.

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

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.

Meet the new EX60

Crowned Reader's Choice at the 2026 WhatCar Awards, and now available on a range of finance options.

Explore

<main class="pagelayout">
  <header class="title-page" slot="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>
</main>

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