Stretched Link 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Use Stretched Link helpers/content styles for readable, accessible markup.

When not

Do not hide focusable controls with visually-hidden without a focusable path.

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.