https://github.com/alangdm/block-link
A simple and super lightweight web component to create block links.
https://github.com/alangdm/block-link
a11y javascript links web-components webcomponents
Last synced: 11 months ago
JSON representation
A simple and super lightweight web component to create block links.
- Host: GitHub
- URL: https://github.com/alangdm/block-link
- Owner: alangdm
- License: mit
- Created: 2020-06-05T10:13:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T08:27:10.000Z (over 2 years ago)
- Last Synced: 2025-07-01T06:22:58.801Z (12 months ago)
- Topics: a11y, javascript, links, web-components, webcomponents
- Language: HTML
- Homepage: https://alangdm.github.io/block-link/
- Size: 44.9 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://webcomponents.dev/edit/dyflJofod72crJWUDyyo)
[](https://www.npmjs.com/package/@alangdm/block-link)
[](https://bundlephobia.com/result?p=@alangdm/block-link)
# ``
###### [Demo](https://alangdm.github.io/block-link/)
A simple and super lightweight web component to create block links.
```html
Header
Some content
Footer link
```
## Why Should You Use This?
Have you ever set a link on a whole section of your web app like this?
```html
Some content maybe with an image
```
If you have, you probably have noticed that while this is super simple, it has a couple of issues:
1. You can't select the text inside this div
2. The accessibility is bad, keyboard navigation and screen readers don't work well with this
And even if you want to solve this either with pure HTML/CSS or adding some JS you might new problems like:
1. Links added to children of the section might not work
2. Using this for many parts of your app might get confusing and hard to maintain
This component solves all those problems
and you can use it like you would use a plain old `
`.
## How it Works
This component's code is mostly an adapted version of the code in
the article ["Block Links: The Search for a Perfect Solution"](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/)
by Vikas Parashar ([@vicode_in](https://twitter.com/vicode_in)).
There are only slight differences in the core behavior of
both implementations so if you want more insight on the
thought that went into this code to prevent the problems
mentioned above please give Vikas's article a read.
## Getting Started
### Install from npm
```bash
npm i @alangdm/block-link
```
Import the component in your JS files
```js
import "@alangdm/block-link";
```
### Add from a CDN
You can use a CDN like unpkg or Pika CDN too
In your HTML files
```html
```
Or in your JS files
```js
import "https://unpkg.com/@alangdm/block-link?module";
```
### Use in Your Code
Basically, just use it as if it was a `
`, all the magic will happen automatically! 🎉
```html
Main Link
Some Text
Footer link
```
By default, the first `` element inside the block-link component will be used as
the link that gets triggered when a user clicks on any place that's not another link.
### Customizing the Main Link
You can add the `main-link` (or `mainlink`) attribute to customize which element is used as the main link.
The value has to be a selector relative to the parent `` that can be used to identify the `` that will be your main link.
```html
This won't be the main link
Some text
This will be the main link
```
In this case we used the `.main-link` class selector to identify our main link,
but we could have also used `footer>a` or even `a[href="#footer"]`.
Any selector works as long as it serves as a unique identifier for the link.
### Nested ``s
You can use ``s inside of other ``s, they can even be the main link.
```html
This will end up being the main link
Some other content. It might have other links
```
### Styling
This component's only style is `display: block;` but you can customize both
the component and its children behave with plain CSS.
```css
block-link {
width: 200px;
height: 200px;
border: 1px solid black;
}
block-link h2,
block-link a {
color: purple;
}
block-link a {
text-decoration: none;
}
```
This would look something like this in action
(Go [here](https://webcomponents.dev/preview/dyflJofod72crJWUDyyo) if you can't see this properly ):
```js script
import "./index.js";
```
block-link {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 1rem;
}
block-link h2,
block-link a{
color: purple!important;
text-decoration: none;
}
Interactive Demo
This will only work if you're viewing it at
the demo/docs site.
Footer Data
## Browser Support
This component works as-is on all evergreen browsers (Chrome, Safari, Edge, Firefox). 💪
This component doesn't support any IE variation, however, due to it's nature,
it will degrade gracefully on IE so that the markup and styles display properly just without the
block link behavior, for example, clicking on links will work but clicking on the rest of the component won't.
## Great Articles on This Topic
- ["Block Links: The Search for a Perfect Solution"](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/) by Vikas Parashar ([@vicode_in](https://twitter.com/vicode_in))
- ["Block Links are a Pain and Maybe just a Bad Idea"](https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/) by Chris Coyier
- ["Cards"](https://inclusive-components.design/cards/) by Heydon Pickering
- ["Block Links, Cards, Clickable Regions, Rows, Etc."](https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html) by Adrian Roselli
- ["Pitfalls of Card UIs"](https://daverupert.com/2018/04/pitfalls-of-card-uis/) by Dave Rupert
> Created with [WebComponents.dev](https://webcomponents.dev)