Link

Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.

Usage

• Only use links for navigation. A link must not trigger another kind of action.
• Do not use a link to trigger an action that could trigger a button. If you want to trigger a button, use a button link instead.

Types

Inline Link

Use an inline link when you need a link to flow naturally with a sentence or paragraph.

Attributes:

• Color: primary blue
• Font weight: inherit
• Hover: primary blue hover color + underline

Single Link

A single link is used for stand-alone hyperlinks. They can be text or an image.

Attributes:

• Primary Text Link Color: primary blue Font weight: semi bold * Hover: primary blue darken 5% color + underline
• Secondary Text Link Color: secondary gray Font weight: semibold * Hover: primary gray color + underline
• Image * No styling

Title Link

A title link is used for list item titles, such as Dataset Display (stacked list, table, or cards), asset title, blog entry teaser title, etc.

Example 1:

Example 2:

Example 3:

Attributes:

• Color: inherit
• Font weight: inherit
• Hover: underline

The image below demonstrates all the available implementations:

External Link

Use external links to point to (target) external resources that are available on domains other than the current domain (source). Lexicon indicates this behavior with a tooltip.

For accessibility purposes, we also provide an icon to illustrate this behavior. This icon is visually hidden by default and only accessible on focus or when using assistive technologies such as screen readers.