Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Helpers
  3. Stretched Link

Stretched Link

Add .velin-stretched-link to a link inside a position: relative container to make the entire container clickable via a ::after pseudo-element.

Card example

Card with stretched link

Click anywhere on this card to follow the link.

Go somewhere
<div class="card" style="position: relative">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Click anywhere on this card.</p>
    <a href="#" class="velin-stretched-link">Go somewhere</a>
  </div>
</div>

Containing block

The stretched link works by using ::after with position: absolute. The nearest ancestor with position: relative becomes the clickable area. Most VelinStyle cards and list-group items already have this set.

Theme wählen