Skip to main content

Link

Component status:Ready
Links connect a user to a different page or further information.

Links are navigational components that direct visitors to other webpages, either internal pages or external websites.

An Inline Link appears within a paragraph. A Text Link has more visual emphasis than an Inline Link and is outside of a paragraph.

Examples#

Inline Link#

Here is an example of an inline link within a paragraph.

Inline Link — Alternate#

Here is an example of an inline link within a paragraph on a light non-white background.

Inline Link — Reverse#

Here is an example of an inline link within a paragraph on a dark background.

Inline Link — Scarlet#

Here is an example of an inline link within a paragraph on a scarlet background.

Text Link#

Text links are used on their own directly following content, within Cards, or in Link Lists. They must not be used within sentences or paragraphs.

Icon Before Link#

Icon After Link#

Usage#

Dos#

  • Use an Inline Link within a paragraph
  • Use a Text Link following another component (typically following a paragraph)
  • Use unique, action-oriented link text

Don’ts#

  • Don’t stack many Text Links; if three or more links are needed, consider using a Link List
  • Don’t use “Click here...” within the link text

Accessibility#

  • Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.
    • For example, instead of "Learn more," use "Learn how to reset your passphrase."
  • Never use a link to say, “click here.” A nondescript link forces users to backtrack and read the surrounding text for more context. This is even more problematic for those who rely on screen readers, which can list links for quicker navigation. A list of “click here” links isn’t helpful for anyone.
  • Links must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA
  • Text Links must never appear in paragraphs, sentences or phrases. They are the same color as default text and they do not have an underline, making them harder to recognize as links.

References#