Link

Use a link (aka anchor or <a>) component if you are navigating a user to a new page or within a page. A link should be employed whenever the URL changes. Links can be embedded within text or presented as standalone elements.

Links are used on their own or directly following content. They are always underlined and can be paired with a leading or trailing icon if needed.

Inline links appear within a sentence or paragraph. They are styled with an underline and should not be paired with an icon.

Standalone links are the default link variant. They are used on their own or directly following content.

Footer links do not use underlines and can be paired with a leading or trailing icon if needed.

External standalone links use a trailing icon of a box and an arrow to indicate that the link takes you outside of the website. External links should be used only as standalone links and not used in a body text.

Links should be used in the body copy and should not be used in headers. If you are looking for a larger or more prominent link, consider using other types of calls to action.

Use links when you want users to:

• Navigate to a different page within your site
• Navigate to an entirely different site
• Jump to an element on the same page (anchor link)
• Link to emails or phone numbers

Avoid dressing a link up as a button

Actions can only be done through buttons. Links are only for going to a new page via an href.

Mixed icons without border separator.

Default

Label = $global-action-content-primary-color-default
Icon = $global-action-content-primary-color-default
Focus = $global-action-border-color-focus

Hover

Label = $global-action-content-primary-color-hover
Icon = $global-action-surface-primary-color-hover