Stretched link

Make any HTML element or boodoo component clickable by "stretching" a nested link via CSS.

Add .stretched-link to a link to make its containing block clickable via a ::after pseudo-element. In most cases, this means an element with position: relative that contains a link with the .stretched-link class is clickable.

Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card's content.

The whole card is clickable.

<div class="card w-100">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">
      <a href="#" class="stretched-link">Card with stretched link</a>
    </h5>
    <p class="card-text">...</p>
  </div>
</div>

If you use .stretched-link on a block-level element that's not inside a positioned parent, make sure the element itself is position: relative (boodoo's .card, .modal, etc. already are).