Link

Links are plain text with visual cues that indicate interactivity. It is a primary means by which users click to move within or around different sites. Using links on a page enables users jump to other parts of the website or a different website for related, supplemental information.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Navigation

Demo

a:link

a:visited

a:hover

a:focus

a:active

Usage best practices

Consider the following when designing links:

  • colour and underline the links to suggest clickability (can be omitted when used in navigation menus)
  • provide visual feedback for different states of the links:
    • default/unvisited
    • visited
    • hover

Set clear expectations with links:

  • clearly explain where the link will take users to
  • link text must be understandable outside of the page context

Allow links to open in a new window for the following situations:

  • when link interrupts user's current task flow
  • when link opens other format documents, such as a PDF

Do

Do

Use underline to make links identifiable unless the link is in navigation menu.

Do

Provide visual feedback for a previously visited link.

Don't

Don't

Do not underline any text that isn’t a link.

Don't

Do not use the chosen link text colour on any text that isn't a link.

Don't

Do not use vague or generic labels for links.