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

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Navigation


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



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


Provide visual feedback for a previously visited link.



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


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


Do not use vague or generic labels for links.