# Link

Takes the reader to another page, another place on the page or another site.

* Kind: component
* Page: https://design.werklist.com/components/link
* Version: 2.1.2

## When to use it

* The result is a new location: a page, an anchor on the page, a file, another site.
* In running text, on the words that name the destination.
* On a line of its own, such as a pointer to a related page.
* external, for another site: it opens a new tab, shows the external glyph, and a screen reader hears opens in a new tab.

## When not to use it

* An action on this screen (save, open a dialog, toggle): use Button, quiet if it should look light.
* A call to action that must look like a button: use a button that opens the page.
* Text such as Click here or Learn more.
* Linking a whole sentence or its punctuation.
* Two links with the same text to different places.
* A new tab for a link inside Werklist.

## Anatomy

* Text: the size, weight and line of the surrounding text
* Ink: --brand-blue in light, --brand-ink in dark (--brand-blue, --brand-ink)
* Underline: 1 px, 2 px below the text, the ink at 30 percent at rest and at full strength on hover, on each line of a link that wraps
* External glyph: the font size of the text, 4 px after it, not underlined, aria-hidden (--space-1)
* Focus ring: outline 2 px, offset 2 px, around each line of a link that wraps (--focus-ring, --focus-ring-width, --focus-ring-offset)

## Variants

* default: All links. Navigation lists in the header, the footer and the left navigation are their own components.
* external: A link to another site: opens a new tab, shows the external glyph, and a screen reader hears opens in a new tab.

## States

* rest: The link ink with an underline at 30 percent of the ink. (--brand-blue, --brand-ink)
* hover: The underline at full ink, in 150 ms. Only on a pointer that can hover. (--brand-blue, --brand-ink, --duration-fast, --ease-standard)
* focus-visible: Outline 2 px at offset 2 px in the focus ring color, around each line of the link. (--focus-ring, --focus-ring-width, --focus-ring-offset)

## Keyboard

* Tab, Shift+Tab: Move focus in document order.
* Enter: Follow the link.
* Space: Scrolls the page. A link does not respond to it.

## Accessibility

* A native a element with href.
* The name is the link text. An external link adds opens in a new tab in a visually hidden span. No title attribute.
* Link ink at 4.5 to 1 on all grounds in both themes.
* A link is always underlined, so it does not depend on color alone.
* A long address wraps inside its column, down to a screen 360 px wide. The underline and the ring follow each line.
* Forced colors: LinkText, underline kept.
* Inline links in a sentence are exempt from the 44 px target. Links in a list sit on rows of 44 px on coarse pointers.

## Content

* Link the words that name the destination. The text makes sense read alone.
* No Click here, no Learn more without its subject, no bare URL unless the address is the content.
* Punctuation stays outside the link.
* Sentence case.

## Tokens

* --brand-blue
* --brand-ink
* --focus-ring
* --focus-ring-width
* --focus-ring-offset
* --space-1
* --duration-fast
* --ease-standard