Links are navigational elements that allow a user to move between content, pages, and websites.
View a live version of the Call to action link and see how it can be customized.
There are two link variants available for use.
Each link variant has different styles depending on how they are used with or without content.
- Inline link - Text with or without color or an underline.
- External link - Text with an external link icon to the right.
- Primary or Secondary call to action link - Bolded text inside of a background or border container.
- Default call to action link - Bolded text with an arrow or icon to the right.
An Inline link can be applied to text used on its own at any size outside of a paragraph. When applied to text inside of a paragraph, it should match the size of the existing text.
Links should be applied when a user needs to jump to content on the same page, visit a page within the same domain, or visit a page within another domain.
Links are navigational elements, so any text needs to accurately communicate the destination. Inconsistent experiences might lead to distrust, lessening the satisfaction of a user during their journey. When writing link content, Inline links should be descriptive to help a user better understand the destination whereas Call to action links should be action-oriented to entice a user to make a selection.
Do not apply a link to an action that needs to be triggered instead, like submitting a form or changing a state.
A user will be directed to another domain if they select an Inline link with an external link icon. For example, if a user needs to be directed to another website with different content or to complete a separate task, a new tab or window (depending on how their browser is configured) is opened so they may complete that task and then return to their original task.
When the Tab key is pressed repeatedly, the focus highlights each Inline and Call to action link in order, from left to right and top to bottom.
|Tab||Moves the focus to the next link.|
|Shift + Tab||Moves the focus to the previous link.|
|Enter||Selects the link with focus.|
Both link variants mostly remain the same on large and small screens. Inline links will break to two lines if there is a lot of text in the paragraph.
Too many links
Do not apply lots of links to paragraph text otherwise a user will have trouble reading the content in its entirety before making a selection.
Different link variants
Do not use different link variants to direct a user to the same page.
When writing link content, avoid ambiguous phrases or a full website URL. A user should have a clear idea of where they are being directed to before they make a selection.
Do not apply links to long strings of text.
Buttons have different use cases and should not be used to promote offers or other content.
External link icon
Do not apply the external link icon to Call to action links.
The Default call to action link arrow and the external link icon should not appear by themselves, they should always be connected to at least one word on the same line.