Links
Links are a fundamental part of web navigation and content structure. They guide users to related information, connect pages, and provide access to external resources. Clear and consistent link styles help users identify interactive elements and understand where they will be taken when they click.
Do
- Use meaningful, descriptive link text that explains the destination or action (eg. "Apply for a licence" or "Learn more about the program").
- Keep link text concise and unique within a page so users can distinguish each target.
- Ensure links are keyboard accessible.
- Indicate when links direct to an external website or open in a new tab.
Don't
- Don't use vague phrases like "click here" or "learn more" as the only link text.
- Don't rely on colour alone to indicate that text is linked.
- Don't use long URLs or raw links as link text; use short descriptive text instead.
- Don't have identical link text that goes to different destinations.
Default Links
Standard links are blue and underlined by default. Ensure linked text doesn't include punctuation at the end of sentences. Use these for most internal navigation and content references. Default link handling changes the link colour to a purple to indicate when it's already been clicked/visited.
Learn about our default link styles.
Links Without a Visited State
Use for frequently-changing content like dashboards, admin interfaces, or live data where distinguishing visited/unvisited states isn't helpful to users.
External Links
Make external links clear by including the organization name in the link text. Avoid generic phrases like 'click here' or explicit 'external link' indicators.
Links Opening in a New Tab
Avoid when possible due to accessibility concerns. When necessary, include 'opens in new tab' in the link text and use proper security attributes. Useful for preserving form data.
Include rel="noreferrer noopener" along with target="_blank" to reduce security risks.
Links on a Dark Background
Use inverse styling for links on dark backgrounds in headers, footers, or custom components. To do this add data-bs-theme="dark" to one of it's ancestors.
Ensure 4.5:1 contrast ratio for accessibility compliance.
Links Without an Underline
Remove underlines only when context makes it clear the text is a link, such as in navigation menus, headers, or sidebars where position indicates functionality.
To indicate interactivity, the link should receive a text-decoration: underline on as it's hover state.