https://github.com/dword-design/sass-stretched-link
A SASS mixin that implements a stretched link. Useful for cards that should be clickable everywhere.
https://github.com/dword-design/sass-stretched-link
bootstrap box-link boxlink link-size sass scss stretched-link
Last synced: 12 months ago
JSON representation
A SASS mixin that implements a stretched link. Useful for cards that should be clickable everywhere.
- Host: GitHub
- URL: https://github.com/dword-design/sass-stretched-link
- Owner: dword-design
- License: other
- Created: 2022-07-07T12:04:35.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-02-21T05:03:30.000Z (over 1 year ago)
- Last Synced: 2025-03-17T11:36:14.860Z (over 1 year ago)
- Topics: bootstrap, box-link, boxlink, link-size, sass, scss, stretched-link
- Language: JavaScript
- Homepage:
- Size: 1.08 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](https://getbootstrap.com/docs/4.3/utilities/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
```bash
# npm
$ npm install sass-stretched-link
# Yarn
$ yarn add sass-stretched-link
```
## Usage
Import the mixin like so:
```scss
@import '~sass-stretched-link';
```
Then create a class with the mixin:
```scss
.stretched-link {
@include stretched-link;
}
```
Now you can use the class in your code:
```html
```
## Contribute
Are you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/sass-stretched-link/issues) or a [pull request](https://github.com/dword-design/sass-stretched-link/pulls)! ⚙️
## 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:
If you want to send me a one time donation. The coffee is pretty good 😊.
Also for one time donations if you like PayPal.
Here you can support me regularly, which is great so I can steadily work on projects.
Thanks a lot for your support! ❤️
## License
[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)