Tap Area

Add hover and press interaction states to clickable regions like navigation items and cards.

@volvo-cars/css v2.5.1

Button tap areas

Show codeHide code

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

Tap area background

Show codeHide code

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

Card tap area target

V90 Recharge

Buy from £63,459

Learn more

Show codeHide code

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