...
A link allows users to move through applications and websites. Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.
Variations
Primary Large Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-large-icon-text&viewMode=story
Primary Large Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-large-icon&args=&viewMode=story
Primary Small Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-small-icon-text&args=&viewMode=story
Primary Small Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--primary-small-icon&args=&viewMode=story
Secondary Large Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-large-icon-text&args=&viewMode=story
Secondary Large Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-large-icon&args=&viewMode=story
Secondary Small Icon Text http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-small-icon-text&args=&viewMode=story
Secondary Small Icon http://phx-husky.s3-website.eu-central-1.amazonaws.com/master/ds/latest/iframe.html?id=design-system-link-variations--secondary-small-icon&args=&viewMode=story
Anatomy
Link anatomy:
Label
Leading icon (optional).
They can be used on their own (Standard or Default, Subtle links), in sentences (Inline links), for navigation (Navigation Links), within headings (Headline links), in CTA blocks (CTA links).
...
Anatomy
Key Content
Item | Type | Notes |
Leading icon | SVG file | Optional |
Label | Single line text |
Editorial
Link text should clearly identify the target of the link.
Avoid using the word “link” in link text.
Avoid using URL’s as link text.
Use inline links to direct users to content that’s not directly related to the journey they’re on.
...
Subtle
...
links
...
Similar content
...
should only be used in scenarios where it is obvious to users through location and proximity that the text is a link.
...
Visual Style
...
...
Two key things for all links:
They have a focus state (it may adjust on certain components, but anything linked – even an image or logo etc. – would take the default focus ring unless specified otherwise);
If the source is external, an “external link” icon would be applied.
...
Links have 8 states that define their appearance: default, hover, focus, active, inactive, visited, selected and unavailable.
Sizing
There are two size variants for the link component: small and large. The link size should match the type size of the text it is inline with. When using links apart from other content, the link size should match the default body copy size of the page.
...
Behavior
When using a mouse user can open a link by clicking anywhere along the link text or on the associated icon.
When using keyboard user can open a link by pressing
Enterwhile the link has focus.
...
Usage
...
Do’s
Use links when you want users to navigate to a different page within the application, navigate to an entirely different site, go to an element on the same page, link to emails or phone numbers.
Links need Link text needs to be clear and concise. The user is able to anticipate It should be obvious for users what will happen when they click.
Keep links as short as possible (still making them clearnot compromising clarity).
Links that aren’t in a sentence text should start with a capital letter and not be punctuated (exception of questions: inline links) .
Use the same text for links that navigate to the same URL.
...
Don’t use links for actions that will change data or manipulate how it is displayed, change a state, or trigger an action.
Avoid generic descriptions, link text must not be "click here".
Linking Avoid linking a full phrase is problematic because the . The word order might change, which would break the link into two parts.
Standalone links don’t need Don’t use a full stop for standalone links.
Too Don’t use too many links will . They clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.
Behavior
Interaction using mouse: user can open a link by clicking anywhere along the link text or on the associated icon.
Interaction using keyboard: user can open a link by pressing Enter while the link has focus.
...
...
Analytics & Data
...
Related/Similar Components
Button
CTA block