Gestreckter Link 1.2.0

Fuege einem Link in einem position: relative-Container .velin-stretched-link hinzu, damit der gesamte Container ueber ein ::after-Pseudoelement klickbar wird. English: stretched-link

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Nutze gestreckte Links fuer Karten oder Listeneintraege, bei denen ein einzelner Link die ganze Flaeche aktivieren soll.

Wann nicht verwenden

Nutze sie nicht, wenn mehrere unabhaengige Aktionen im selben Container liegen.

Kartenbeispiel

Karte mit gestrecktem Link

Klicke irgendwo auf diese Karte, um dem Link zu folgen.

Zum Ziel

<div class="card" style="position: relative">
  <div class="card-body">
    <h5 class="card-title">Karte mit gestrecktem Link</h5>
    <p class="card-text">Klicke irgendwo auf diese Karte.</p>
    <a href="#" class="velin-stretched-link">Zum Ziel</a>
  </div>
</div>

Containing Block

Der gestreckte Link arbeitet mit ::after und position: absolute. Der naechste Vorfahre mit position: relative wird zur klickbaren Flaeche. Viele VelinStyle-Karten und List-Group-Items bringen das bereits mit.