Title

A layout component for page or section headings with description and optional action button.

@volvo-cars/css v2.5.1

Title without an action

Meet the new EX60

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

Show codeHide code

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

Section

Meet the new EX60

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

Show codeHide code

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

Title in a page layout

Meet the new EX60

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

Explore

Show codeHide code

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