Link

A link takes the reader to another page, another place on the page or another site. It sits in running text or on a line of its own, and it is always underlined.

Anatomy and states

Before the interview with Arjun Thapa, check his documents against the work permit checklist and ask him for the missing ones.

work permit checklistRestwork permit checklistHoverwork permit checklistFocus

A link takes the size and weight of the text around it, in brand blue, with an underline at 30 percent of that blue. Hover brings the underline to full strength, and keyboard focus draws the focus ring around the words.

A link is always underlined, so it does not depend on color alone.

Ink in light: The brand blue; --brand-blue
Ink in dark: The lighter brand blue made for text; --brand-ink
Underline at rest: 1 px, 30 percent of the ink, 2 px below the text
Underline on hover: The full ink
Focus: 2 px outline, 2 px offset; --focus-ring
Size and weight: Those of the surrounding text
Transition: 150 ms on the standard curve; --duration-fast

When to use it

Use a link when the result is a new location. When the result is an action on this screen, such as saving or opening a dialog, use a button, even a quiet one.

A call to action that should look like a button, such as View candidates, is a button with an address. It keeps the behavior of a link.

Links to other sites

A link to another site opens in a new tab, shows the external glyph after its text and tells a screen reader that it opens a new tab. Links within Werklist open in the same tab.

External glyph: The font size of the text, 4 px after it, not underlined; --space-1
Read to a screen reader: opens in a new tab

Writing the link

Link the words that name the destination, and make them readable on their own: work permit checklist, not Click here or Learn more. Leave punctuation outside the link.

Two links with the same text lead to the same place. Show an address as text only when the address is the point, such as an email address to write to.

A long address breaks inside the column on a phone, so the page does not scroll sideways.

Keyboard and screen readers

Tab reaches a link and Enter follows it. Space scrolls the page and leaves the link alone.

A screen reader lists links out of their sentences, so the text alone must say where each one leads.

Permitted and not permitted

Permitted

Check the work permit checklist
The link sits on the words that name the page
werklist.com with the external glyph
The reader knows a new tab opens

Not permitted

Click here
Read alone, it says nothing about the destination
A link that saves or opens a dialog
An action on this screen is a button

NextToolbar

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

JSON

{
  "title": "Link",
  "path": "/components/link",
  "url": "https://design.werklist.com/components/link",
  "text": "https://design.werklist.com/agent/components/link",
  "summary": "A link takes the reader to another page, another place on the page or another site.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Link",
  "purpose": "Takes the reader to another page, another place on the page or another site.",
  "use": [
    "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."
  ],
  "avoid": [
    "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": [
    {
      "part": "Text",
      "measure": "the size, weight and line of the surrounding text",
      "token": ""
    },
    {
      "part": "Ink",
      "measure": "--brand-blue in light, --brand-ink in dark",
      "token": "--brand-blue, --brand-ink"
    },
    {
      "part": "Underline",
      "measure": "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",
      "token": ""
    },
    {
      "part": "External glyph",
      "measure": "the font size of the text, 4 px after it, not underlined, aria-hidden",
      "token": "--space-1"
    },
    {
      "part": "Focus ring",
      "measure": "outline 2 px, offset 2 px, around each line of a link that wraps",
      "token": "--focus-ring, --focus-ring-width, --focus-ring-offset"
    }
  ],
  "variants": [
    {
      "name": "default",
      "use": "All links. Navigation lists in the header, the footer and the left navigation are their own components."
    },
    {
      "name": "external",
      "use": "A link to another site: opens a new tab, shows the external glyph, and a screen reader hears opens in a new tab."
    }
  ],
  "states": [
    {
      "name": "rest",
      "change": "The link ink with an underline at 30 percent of the ink.",
      "tokens": [
        "--brand-blue",
        "--brand-ink"
      ]
    },
    {
      "name": "hover",
      "change": "The underline at full ink, in 150 ms. Only on a pointer that can hover.",
      "tokens": [
        "--brand-blue",
        "--brand-ink",
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "focus-visible",
      "change": "Outline 2 px at offset 2 px in the focus ring color, around each line of the link.",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab, Shift+Tab",
      "action": "Move focus in document order."
    },
    {
      "key": "Enter",
      "action": "Follow the link."
    },
    {
      "key": "Space",
      "action": "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"
  ]
}

Raw file: https://design.werklist.com/agent/components/link