Tap Area

Apply tap-area to a semantic link or button to add the system hover and press feedback.

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

Show codeHide code

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

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.

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.

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