sass-stretched-link

A SASS mixin that implements a stretched link. Useful for cards that should be clickable everywhere.

It sometimes happens that when you click a card with a link, you want the whole card to be clickable. The best way to do this is to have a link that is put inside the card but the clickable link area stretches over the card. Bootstrap implements a .stretched-link class which does that. This SASS mixin implements the logic behind it and thus abstracts away complexity from the app or the CSS framework.

Install

# npm
$ npm install sass-stretched-link

# Yarn
$ yarn add sass-stretched-link

Usage

Import the mixin like so:

@import '~sass-stretched-link';

Then create a class with the mixin:

.stretched-link {
  @include stretched-link;
}

Now you can use the class in your code:

<div class="card">
  <a class="stretched-link" href="/">Link</a>
</div>

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️

License

MIT License © Sebastian Landwehr