{"id":18187958,"url":"https://github.com/alangdm/block-link","last_synced_at":"2025-07-18T18:36:04.791Z","repository":{"id":53598736,"uuid":"269597483","full_name":"alangdm/block-link","owner":"alangdm","description":"A simple and super lightweight web component to create block links.","archived":false,"fork":false,"pushed_at":"2023-12-15T08:27:10.000Z","size":46,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-01T06:22:58.801Z","etag":null,"topics":["a11y","javascript","links","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://alangdm.github.io/block-link/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alangdm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-05T10:13:47.000Z","updated_at":"2024-11-14T09:46:00.000Z","dependencies_parsed_at":"2025-04-02T03:31:29.456Z","dependency_job_id":null,"html_url":"https://github.com/alangdm/block-link","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/alangdm/block-link","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fblock-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fblock-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fblock-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fblock-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alangdm","download_url":"https://codeload.github.com/alangdm/block-link/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alangdm%2Fblock-link/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265810363,"owners_count":23831949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","javascript","links","web-components","webcomponents"],"created_at":"2024-11-03T02:04:10.794Z","updated_at":"2025-07-18T18:36:04.770Z","avatar_url":"https://github.com/alangdm.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![edit-in-WebComponents.dev](https://webcomponents.dev/assets/ext/edit_in_wcd.svg)](https://webcomponents.dev/edit/dyflJofod72crJWUDyyo)\n[![npm](https://img.shields.io/npm/v/@alangdm/block-link)](https://www.npmjs.com/package/@alangdm/block-link)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/@alangdm/block-link)](https://bundlephobia.com/result?p=@alangdm/block-link)\n\n# `\u003cblock-link\u003e`\n\n###### [Demo](https://alangdm.github.io/block-link/)\n\nA simple and super lightweight web component to create block links.\n\n```html\n\u003cscript\n  src=\"https://unpkg.com/@alangdm/block-link?module\"\n  type=\"module\"\n\u003e\u003c/script\u003e\n\n\u003cblock-link main-link=\"h2 a\"\u003e\n  \u003csmall\u003e\u003ca href=\"#date\"\u003eDate: 2020/01/01\u003c/a\u003e\u003c/small\u003e\n  \u003ch2\u003e\u003ca href=\"#header\"\u003eHeader\u003c/a\u003e\u003c/h2\u003e\n  \u003cp\u003eSome content\u003c/p\u003e\n  \u003cfooter\u003e\u003ca href=\"#footer\"\u003eFooter link\u003c/a\u003e\u003c/footer\u003e\n\u003c/block-link\u003e\n```\n\n## Why Should You Use This?\n\nHave you ever set a link on a whole section of your web app like this?\n\n```html\n\u003ca href=\"/some-link\"\u003e\n  \u003cdiv\u003e\n    Some content maybe with an image\n    \u003cimg src=\"/some-image.png\" /\u003e\n  \u003c/div\u003e\n\u003c/a\u003e\n```\n\nIf you have, you probably have noticed that while this is super simple, it has a couple of issues:\n\n1. You can't select the text inside this div\n2. The accessibility is bad, keyboard navigation and screen readers don't work well with this\n\nAnd even if you want to solve this either with pure HTML/CSS or adding some JS you might new problems like:\n\n1. Links added to children of the section might not work\n2. Using this for many parts of your app might get confusing and hard to maintain\n\nThis component solves all those problems\nand you can use it like you would use a plain old `\u003cdiv\u003e`.\n\n## How it Works\n\nThis component's code is mostly an adapted version of the code in\nthe article [\"Block Links: The Search for a Perfect Solution\"](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/)\nby Vikas Parashar ([@vicode_in](https://twitter.com/vicode_in)).\n\nThere are only slight differences in the core behavior of\nboth implementations so if you want more insight on the\nthought that went into this code to prevent the problems\nmentioned above please give Vikas's article a read.\n\n## Getting Started\n\n### Install from npm\n\n```bash\nnpm i @alangdm/block-link\n```\n\nImport the component in your JS files\n\n```js\nimport \"@alangdm/block-link\";\n```\n\n### Add from a CDN\n\nYou can use a CDN like unpkg or Pika CDN too\n\nIn your HTML files\n\n```html\n\u003c!-- example from unpkg --\u003e\n\u003cscript\n  src=\"https://unpkg.com/@alangdm/block-link?module\"\n  type=\"module\"\n\u003e\u003c/script\u003e\n```\n\nOr in your JS files\n\n```js\nimport \"https://unpkg.com/@alangdm/block-link?module\";\n```\n\n### Use in Your Code\n\nBasically, just use it as if it was a `\u003cdiv\u003e`, all the magic will happen automatically! 🎉\n\n```html\n\u003cblock-link\u003e\n  \u003ch2\u003e\u003ca href=\"#header\"\u003eMain Link\u003c/a\u003e\u003c/h2\u003e\n  \u003cp\u003e\n    Some Text\n  \u003c/p\u003e\n  \u003cfooter\u003e\u003ca href=\"#footer\"\u003eFooter link\u003c/a\u003e\u003c/footer\u003e\n\u003c/block-link\u003e\n```\n\nBy default, the first `\u003ca\u003e` element inside the block-link component will be used as\nthe link that gets triggered when a user clicks on any place that's not another link.\n\n### Customizing the Main Link\n\nYou can add the `main-link` (or `mainlink`) attribute to customize which element is used as the main link.\n\nThe value has to be a selector relative to the parent `\u003cblock-link\u003e` that can be used to identify the `\u003ca\u003e` that will be your main link.\n\n```html\n\u003cblock-link main-link=\".main-link\"\u003e\n  \u003ch2\u003e\u003ca href=\"#header\"\u003eThis won't be the main link\u003c/a\u003e\u003c/h2\u003e\n  \u003cp\u003e\n    Some text\n  \u003c/p\u003e\n  \u003cfooter\u003e\n    \u003ca class=\"main-link\" href=\"#footer\"\u003eThis will be the main link\u003c/a\u003e\n  \u003c/footer\u003e\n\u003c/block-link\u003e\n```\n\nIn this case we used the `.main-link` class selector to identify our main link,\nbut we could have also used `footer\u003ea` or even `a[href=\"#footer\"]`.\nAny selector works as long as it serves as a unique identifier for the link.\n\n### Nested `\u003cblock-link\u003e`s\n\nYou can use `\u003cblock-link\u003e`s inside of other `\u003cblock-link\u003e`s, they can even be the main link.\n\n```html\n\u003cblock-link main-link=\".child\"\u003e\n  \u003cblock-link class=\"child\" main-link=\"#link\"\u003e\n    \u003cimg src=\"/some_image.png\" /\u003e\n    \u003ca href=\"#main_link\" id=\"link\"\u003eThis will end up being the main link\u003c/a\u003e\n  \u003c/block-link\u003e\n  \u003cp\u003eSome other content. It might have \u003ca href=\"#other\"\u003eother links\u003c/a\u003e\u003c/p\u003e\n\u003c/block-link\u003e\n```\n\n### Styling\n\nThis component's only style is `display: block;` but you can customize both\nthe component and its children behave with plain CSS.\n\n```css\nblock-link {\n  width: 200px;\n  height: 200px;\n  border: 1px solid black;\n}\n\nblock-link h2,\nblock-link a {\n  color: purple;\n}\n\nblock-link a {\n  text-decoration: none;\n}\n```\n\nThis would look something like this in action\n(Go [here](https://webcomponents.dev/preview/dyflJofod72crJWUDyyo) if you can't see this properly ):\n\n```js script\nimport \"./index.js\";\n```\n\n\u003cstyle\u003e\nblock-link {\n  width: 200px;\n  height: 200px;\n  border: 1px solid black;\n\tpadding: 1rem;\n}\n\nblock-link h2,\nblock-link a{\n  color: purple!important;\n\ttext-decoration: none;\n}\n\u003c/style\u003e\n\u003cblock-link\u003e\n  \u003ch2\u003e\u003ca href=\"#header\"\u003eInteractive Demo\u003c/a\u003e\u003c/h2\u003e\n  \u003cp\u003e\n    This will only work if you're viewing it at \n\t\t\u003ca href=\"https://webcomponents.dev/preview/dyflJofod72crJWUDyyo\"\u003ethe demo/docs site.\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cfooter\u003e\n    \u003ca class=\"main-link\" href=\"#footer\"\u003eFooter Data\u003c/a\u003e\n  \u003c/footer\u003e\n\u003c/block-link\u003e\n\n## Browser Support\n\nThis component works as-is on all evergreen browsers (Chrome, Safari, Edge, Firefox). 💪\n\nThis component doesn't support any IE variation, however, due to it's nature,\nit will degrade gracefully on IE so that the markup and styles display properly just without the\nblock link behavior, for example, clicking on links will work but clicking on the rest of the component won't.\n\n## Great Articles on This Topic\n\n- [\"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))\n- [\"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\n- [\"Cards\"](https://inclusive-components.design/cards/) by Heydon Pickering\n- [\"Block Links, Cards, Clickable Regions, Rows, Etc.\"](https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html) by Adrian Roselli\n- [\"Pitfalls of Card UIs\"](https://daverupert.com/2018/04/pitfalls-of-card-uis/) by Dave Rupert\n\n\u003e Created with [WebComponents.dev](https://webcomponents.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falangdm%2Fblock-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falangdm%2Fblock-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falangdm%2Fblock-link/lists"}