Links are a navigation component. They direct users to another section, page, or site. Their core function is to connect users with relevant information without adding clutter to a page. Unlike buttons, which trigger actions, links move users through content.
Links must be immediately recognisable as interactive elements and clearly distinguishable from surrounding text.
ECL provides two behavioural variants:
- Inline link sit within a body of text
- Standalone links appear independently of paragraph content
Other navigation components (e.g. call-to-action buttons) available carry additional visual prominence - to signal greater importance.
Do's
- write link text that is concise, self-explanatory and describes to users what to expect. Users should understand the destination from the link text alone
- use an external icon to indicate linking to a site outside of the current instance
- always underline inline links (those integrated within a paragraph or running text) to aid identification, as opposed to standalone links that do not need the extra stylisation
- default link colour is blue. On dark backgrounds use the inverted links where the link colour is white to ensure sufficient colour contrast
Don'ts
- avoid generic text such as 'Click here', 'More', or 'Read more'
- do not underline Standalone links (those outside of running text). Underlining should appear only on hover
- avoid using more than one Call-to-action, Primary or Secondary link in close proximity
When to use
- use when navigating to another page, section, or site
- use an Inline link where the link sits within a body of text
- use a Standalone link when the link exists outside of running text - e.g. at the end of a section of content. Standalone links are well suited to groups of related links presented as a list
- use Calls-to-action where a single navigational prompt needs to carry more visual weight than a default hyperlink. Use sparingly to signal that one link/destination is meaningfully more important than surrounding links
- use when users need direct access to related information that would otherwise interrupt or over-extend the current page
- when presenting a group of navigation options that are separate from the main body text, use standalone links to create a clean, scannable list
When not to use
- do not use a link to trigger an action such as submitting a form, confirming a selection, or initiating a process. Instead, use the Button component, which matches user expectations
- do not use a link as a substitute for navigation components when a structured, site-level navigation pattern is required. Consider the Navigation list, Inpage navigation, or Pagination components