Tap Area

Apply the tap-area class to buttons, links, or containers that need hover and press feedback. On interaction, the background subtly blends toward the current foreground color.

• Book a service
• Talk to a Volvo specialist
• Support & manuals

<ul class="font-medium">
  <li>
    <a href="#top" class="tap-area px-16 py-8">Book a service</a>
  </li>
  <li>
    <a href="#top" class="tap-area px-16 py-8">Talk to a Volvo specialist</a>
  </li>
  <li>
    <a href="#top" class="tap-area px-16 py-8">Support & manuals</a>
  </li>
</ul>

Button areas

Use on <button> elements for larger tappable regions with rich content. Add padding and layout utilities directly on the element.

Electric

Pure electric

Mild hybrids

Mild hybrids | Micro hybrids

<div class="flex-col" style="width: 15rem">
  <button type="button" class="tap-area p-16 stack-text text-start">
    <b class="font-20 font-medium">Electric</b>
    <p class="text-secondary micro">Pure electric</p>
  </button>
  <button type="button" class="tap-area p-16 stack-text text-start">
    <b class="font-20 font-medium">Mild hybrids</b>
    <p class="text-secondary micro">Mild hybrids | Micro hybrids</p>
  </button>
</div>

Background color

By default a tap area is transparent at rest. Set the --background-color custom property to give it a resting background — the hover and press overlays blend on top of it.

Mild hybrids

Mild hybrids | Micro hybrids

<div class="flex-col" style="width: 15rem">
  <button
    type="button"
    class="tap-area p-16 text-start stack-text"
    style="--background-color: var(--v-color-background-secondary)"
  >
    <b class="font-20 font-medium">Mild hybrids</b>
    <p class="text-secondary micro">Mild hybrids | Micro hybrids</p>
  </button>
</div>

Tap area target

To make an entire card tappable while keeping nested links and buttons independently interactive, add data-tap-area-target to the primary link or button inside the card. Its pseudo-element expands to cover the whole .tap-area container.

V90 Recharge

Buy from £63,459

Learn more

<div class="tap-area p-16 stack-4">
  <h3 class="font-16 font-medium" id="tap-target-heading">V90 Recharge</h3>
  <p class="micro text-secondary">
    Buy from <span class="text-primary">£63,459</span>
  </p>
  <a href="#top" data-tap-area-target aria-labelledby="tap-target-heading">
    Learn more
  </a>
</div>

The target element gets position: static and an ::before pseudo-element with inset: 0, so the card must not have other absolutely positioned children that conflict.

Accessibility

• Use semantic elements (<a>, <button>) for the tap area or its target — don’t make <div> elements clickable
• When using data-tap-area-target, add aria-labelledby or aria-label to the target if its text content alone isn’t descriptive enough
• Avoid nesting interactive elements directly — use data-tap-area-target instead so assistive technology can parse the structure correctly