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
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Navigation
Demo
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
Use underline to make links identifiable unless the link is in navigation menu.
Provide visual feedback for a previously visited link.
Don't
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.