Hero

Full-width hero blocks for prominent page-level messaging with text and media layouts.

@volvo-cars/css v2.5.1

Text hero

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-outlined" href="#">Read more</a>
  </div>
</section>

Media hero

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