Stretched link

Usage #

Add the .stretched-link class to a link to make its containing block (opens in new tab) clickable via a ::after pseudo element. In most cases, this means that an element with position: relative that contains a link with the .stretched-link class is clickable. Please note given how CSS position works (opens in new tab), .stretched-link cannot be mixed with most table elements. Moreover, multiple links and tap targets are not recommended with stretched links.

Cards have position: relative by default, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes. Given below is an example of a product card created with a stretched link.

Cool Neon Kicks

$129 $200

Add to bag

<div class="card specific-w-300 mw-100 mx-auto">
  <img src="..." class="card-img-top" alt="..." height="240">
  <div class="card-body">
    <h5 class="card-title">Cool Neon Kicks</h5>
    <p class="card-text fs-5 d-flex align-items-center">
      <strong class="text-success-emphasis me-2">$129</strong>
      <s class="fs-6 text-body-secondary">$200</s>
    </p>
    <a href="#" class="stretched-link btn btn-success btn-lg w-100">
      <i class="fa-light fa-bag-shopping me-1"></i> Add to bag
    </a>
  </div>
</div>

Please note, the icon being used is taken from the Font Awesome icon library (opens in new tab).

With custom components #

Most custom components do not have position: relative by default, so we need to add the .position-relative here to prevent the link from stretching outside the parent element.

<div class="position-relative d-inline-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="ms-3">
    <h5 class="m-0">Abbey Road</h5>
    <a href="#" class="stretched-link">Listen now</a>
  </div>
</div>

Identifying the containing block #

If the stretched link doesn't seem to work, the containing block will probably be the cause. The following CSS properties will make an element the containing block:

• A position value other than static
• A transform or perspective value other than none
• A will-change value of transform or perspective
• A filter value other than none or a will-change value of filter (only works on Firefox)

In general, it is a good idea to stick to simple usage patterns, similar to the ones shown on this page. They are good enough to handle most (if not all) real-life UI/UX patterns.