| Page Properties | ||||||
|---|---|---|---|---|---|---|
|
Introduction
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.
...
Variants
...
Anatomy
Link anatomy:
Label
Leading icon (optional).
They can be used on their own (standalone Standard or Default, Subtle links) or , in sentences (inline (Inline links), for navigation (Navigation Links), within headings (Headline links), in CTA blocks (CTA links).
Standalone Standard or Default links are used on their own directly in the following content. Inline links appear within paragraphs or sentences. They’re used to direct users to content that’s not directly related to the journey they’re on. The difference between Subtle and Standard links is only the default state. Navigation links are effectively along the lines of subtle because their default behaviour is not underlined and not action colour. But the design team thought it important to provide a custom behaviour for navigation. Headline link could be created by a Content Editor in rich text if they add a heading and link it. Headline links would probably really only occur in articles. CTA Links stand alone within CTA Blocks from content. They will never be include in a paragraph. Social Links are icon only links (text hidden) that are subtle (not underlined and not action colour).
Similar content
Link appearance can be quite similar to button or CTA. Usually, if the user is making changes to the back or front-end of the site when clicking, you should use a button. If the user is being directed to a different page, you can use 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.
States
Links have 8 states that define their appearance: default, hover, focus, active, inactive, visited, selected and unavailable.
...
Interaction using keyboard: user can open a link by pressing Enter while the link has focus.
Unlikely ever to be content editable, so would be tied in nearly all cases to a component. Subtle links are only allowed in scenarios where it is obvious to users through location and proximity that the text is a link. You’ll see this in menu items. The main thing here is that it allows for the default link colour to not be the action colour and it removed the default underline style. This is also very similar to the headings on cards – because the card itself is linked, it doesn’t need the heading underlined on the card by default, but we apply the subtle link behaviour to the heading just to give extra confirmation that it will actually click through if you click the card.