Links

Since v1.0.0

View source

By adding the .h-stretched-link class to a link, it make the "block" clickable via a pseudo-element.
To acheive it, the pseudo-element is stretched to recover the nearest parent with position: relative property.

For the next example, the Card component already have a position set by default, but if it's not the case, you can add the .u-pos-r utility class.

Card title

Add some text inside the card.
ok more text here.

Action

<div class="c-card"><!-- the .u-pos-r is not required with the card component -->
  <div class="c-card__img">
    <img src="img/lake-1.jpg" alt="Photo by Adam Vradenburg on Unsplash">
  </div>
  <div class="c-card__header">
    <div class="c-card__title u-h5 u-mb-0">Card title</div>
  </div>
  <div class="c-card__body">
    <span>Add some text inside the card.<br>ok more text here.</span>
  </div>
  <div class="c-card__footer">
    <a class="c-button c-button--primary h-stretched-link" href="#">Link</a>
  </div>
</div>