CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Bundle
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/link@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Normal body text link
Standalone link
Back-to link
External link
<a class="if external-link" target="_blank" rel="noreferrer noopener" href="/internal/link">
This is an internal link<span className="if axe sr-only">, opens in new window</span>
</a>
<a class="if external-link" target="_blank" rel="noreferrer noopener" href="https://www.google.com">
This is an external link<span className="if axe sr-only">, opens in new window</span>
</a>
NOTE! Always use target="_blank" rel="noreferrer noopener"
on external links!
For screen readers, you need to indicate textually that the link opens up in a new window to meet the accessibility requirements.
Accesible download links
Use the following examples when creating accessible download links. Please note the usage of .download
.
Using mixins for links
If you want to avoid using the scoped links, and you use SASS, Stylus or LESS, you can use the provided mixins:
Only SCSS is in the example below, but all mixins have the same name in all preprocessors.
@import '@ids-core/color/src/color-variables.scss';
@import '@ids-core/link/src/mixins/link.scss';
a,
a:active,
a.is-active {
@include IDS_LINK_Base;
}
a:hover,
a.is-hovered,
a:visited,
a.is-visited {
@include IDS_LINK_Hovered;
}
a.standalone:hover,
a.standalone.is-hovered,
a.standalone:visited:hover,
a.standalone.is-hovered.is-visited {
@include IDS_LINK_StandaloneHover;
}
a.standalone,
a.standalone:visited,
a.standalone.is-visited,
a.standalone:active,
a.standalone.is-active {
@include IDS_LINK_StandaloneVisitedAndActive;
}
a.standalone::after {
@include IDS_LINK_Standalone_After;
}
a.if.external-link {
&::after {
@include IDS_LINK_External_After;
}
}
Tokens
All of the tokens can be used as preprocessor and CSS variables
Link tokens
Name | Value | Is aliased in |
---|---|---|
$ids-link-content-icon-backto |
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg class='nc-icon-wrapper' stroke-linecap='square' stroke-linejoin='miter' stroke-width='1.5' fill='%230054f0' stroke='%230054f0'%3E%3Cpolyline fill='none' stroke='%230054f0' stroke-miterlimit='10' points='19,22 13,16 19,10 '/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-link-content-icon-external |
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%230054f0' stroke-width='3' d='M4.791 2.234h25.196v24.808m.145-24.91L1.786 30.04'/%3E%3C/svg%3E") |
|
$ids-link-content-icon-standalone |
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke-miterlimit='10' d='M13 10l6 6-6 6' stroke-linecap='square' stroke-width='1.5' stroke='%230054f0'/%3E%3C/svg%3E") |
|
$ids-link-color-normal-default |
rgb(0, 84, 240) |
|
$ids-link-color-normal-hover |
rgb(0, 64, 128) |
|
$ids-link-color-normal-visited |
rgb(0, 84, 240) |
|
$ids-link-spacing-inset |
0 0 0 1rem |
|
$ids-link-spacing-icon-inline |
0.5rem |
|
$ids-link-size-icon-standalone |
1.5rem |
|
$ids-link-size-icon-backto |
1.5rem |
|
$ids-link-size-icon-external |
0.75rem |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.22.2 (2022-05-03)
Miscellaneous chores
14.20.1 (2022-04-19)
Features
Bug Fixes
- ๐ Fix svg issue with pseudo elements for Link (f9f0b91)
Documentation Updates
Miscellaneous chores
- ๐ค Add dev server to Link (e7aead6)
- ๐ค Update dev setup for Link (38c7f38)
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
-
๐ค Bootstrap (6822f5b)
reinstall (d425056)
14.7.1 (2022-02-18)
Bug Fixes
- Use correct name (bce2a03)
Code Refactoring
-
๐ก Use css vars and split up mixins (33c1fd5)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
14.1.3 (2021-11-24)
Code Refactoring
- ๐ก Make external links optional, and add a11y notes (3f20272)
Documentation Updates
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ Util is now renamed to Utils
- ๐งจ The external link rules are now eased up a bit to avoid any issues revolving around using links. This could have some negative side effects.
- ๐งจ We have now changed the navigation structure for the documentation site. Please update any saved links!
- ๐งจ Navigation structure has now changed. Please see release notes!
Documentation Updates
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Separate out CSS documentation (df4f3a5) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Ease up on the external link rules (1213e5e) , closes #465291
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.14.0 (2021-08-11)
Features
12.13.1 (2021-08-11)
Bug Fixes
-
๐ Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Reinstall (e660696)
-
๐ค Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.0.0 (2021-05-05)
โ BREAKING CHANGES
- ๐งจ All of the mixins have now been renamed
- ๐งจ Notification is now renamed to Alert Banner
- ๐งจ This extracts the Hero variation with no image into a separate, design updated component named Header
Features
- ๐ธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Bug Fixes
- ๐ Update references (c08f107)
Code Refactoring
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ก Rename Notification to Alert Banner (8b4e48d) , closes #336508
Miscellaneous chores
-
๐ค Convert util tokens from theo to style-dictionary (99fb4f5)
-
๐ค Reinstall (2c763ea)
-
๐ค Reinstall (69e1a5b)
-
๐ค Update all design token references (c640d15)
-
๐ค Update references to util variables (b79ec36)
-
๐ค Updating links (70f166e)
-
๐ค Use updated classnames for text button (old tertiary) (694cf67)
rebuild (7edb430)
-
๐ค Rename Change Log to Changelog (d412e63)
-
๐ค Remove all references to sketch (35fc554) , closes #339203
-
๐ค Update package fields (200c0af)
-
reinstall packages (fcfacf4)
7.1.0 (2020-11-16)
Features
6.43.3 (2020-11-03)
Miscellaneous chores
-
๐ค Manually set version (e4d9ca6)
-
๐ค Rename repository from guybrush to if-design-system (c18bccd)
reinstall (2cefe15)
6.36.0 (2020-10-12)
Features
- ๐ธ Add updated focus styling for link (4fe9d48)
Miscellaneous chores
6.29.4 (2020-09-09)
Documentation Updates
- โ๏ธ Use correct strong element with if class (6b484df)
6.29.3 (2020-09-07)
Documentation Updates
- โ๏ธ Merge atoms/molecules/organisms into components (90ed590)
6.26.12 (2020-08-03)
Documentation Updates
- โ๏ธ Update documentation for the new registry (3e7ba20)
Miscellaneous chores
-
๐ค lerna bootstrap (d835ec9)
-
๐ค Temporarily remove package-lock.json-files (87b3f7f)
-
๐ค Update references to new scope (b5575dd)
6.26.10 (2020-07-14)
Miscellaneous chores
-
๐ค Manually update some links (ecc0133)
-
๐ค Update CHANGELOG.md links to workitems and commits (ab2887b)
6.25.2 (2020-07-08)
Bug Fixes
- ๐ Use correct heading classes in examples (52c1e2d)
6.23.0 (2020-07-01)
Miscellaneous chores
reinstall (1ab1527)
6.22.0 (2020-07-01)
Miscellaneous chores
- ๐ค Search and replace old color usage (3e5abb0)
6.21.6 (2020-06-11)
Miscellaneous chores
- ๐ค Remove .zip files from .npmignore (b3bc7dc)
6.21.0 (2020-06-04)
Features
- ๐ธ Add back-to-link (c2600ca)
6.19.0 (2020-06-02)
Miscellaneous chores
reinstall (3416c65)
6.15.5 (2020-05-15)
Miscellaneous chores
-
prepped and ready to separate documentation site from code (d3e1fd9)
-
pruning and reinstalling (5cda0bc)
reinstall (939dae6)
reinstall (cae55fb)
- Remove livingcss data and add frontmatter data (b384946)
6.15.4 (2020-05-14)
Miscellaneous chores
- lerna bootstrap (0c4f599)
6.15.2 (2020-05-11)
Miscellaneous chores
- reinstall and build (aedc097)
6.15.0 (2020-05-07)
Miscellaneous chores
6.10.9 (2020-04-22)
Miscellaneous chores
- ๐ค Add *.zip-files to .npmignore-files (062b8b0)
6.10.6 (2020-04-17)
Miscellaneous chores
- ๐ค lerna bootstrap (d8faf26)
6.9.1 (2020-04-16)
Documentation Updates
- โ๏ธ Use correct badge color in README.md (03b563e)
6.6.0 (2020-04-09)
Documentation Updates
- โ๏ธ Change edit this document to edit this section (791b646)
6.5.3 (2020-04-06)
Documentation Updates
- โ๏ธ Some more sg updates and tweaks (d1d6802)
6.3.4 (2020-04-01)
Miscellaneous chores
- ๐ค Use more of if styling on documentation site (2eaf386)
6.3.2 (2020-03-31)
Documentation Updates
- โ๏ธ Replace sg.message with if.notification (5d1aa99)
5.2.0 (2020-03-17)
Code Refactoring
- ๐ก Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother
5.0.4 (2020-03-14)
Miscellaneous chores
-
๐ค Delete really old install files, update README files (c5d4893)
-
๐ค Remove .npmrc fles (4e26249)
5.0.1-alpha.161 (2020-03-13)
Bug Fixes
- ๐ We forgot Sweden! (1b09311)
5.0.1-alpha.160 (2020-03-12)
Miscellaneous chores
- lerna bootstrap (ba851cd)
5.0.1-alpha.156 (2020-03-11)
โ BREAKING CHANGES
- ๐งจ Links are no longer part of core. Paths has been changed, and it is now a component. Please check your references!