Featured link: Canada.ca design system
Last updated: 2024-04-03
The featured link is a short, descriptive link that your institution needs to feature prominently on a landing page.
On this page
When to use
Use the featured link pattern to promote significant items of a temporary nature, such as a Remembrance day statement.
Use this pattern on landing pages only.
You can manage multiple links in the featured link spot by randomizing them for every visit to the page.
What to avoid
Don’t use this pattern when you want people to stay on the page and do their task.
Don't include images in this section.
Don’t include more than one link within the pattern.
Don’t include more than one featured link section on a page.
Content and design
Find content and design specifications and visual examples.
Content specifications
Within this pattern, left-align the text.
Use descriptive link text so it's clear where the user will go if they click on the link.
Design specifications
-
Text:
- Colour: #FFF
- Font type: Lato Sans
- Font size: 20px
-
Background:
- Default colour: #355688
- Opacity: 0.9
-
Padding:
- Bottom: 15px
- Top: 15px
You can change the background colour to match design needs.
Accessibility
The "Featured" heading should have the wb-inv class, so it isn’t visible, but is still present for the semantic outline and screen readers.
If you change the background colour, ensure there is a contrast ratio of at least 4.5:1.
Visual examples
Image description: featured link - large screen
A featured link is displayed in a blue band that spans the length of the screen. Above the featured link is the department name (Natural Resources Canada) followed by a short description about the department.
How to implement
Find working examples and code for implementing the featured link, including the randomizer functionality.
GCWeb
Randomizer in WET
Implementations
Determine what best suits the type of page you're creating.
GC-AEM
For the Government of Canada Adobe Experience Manager (AEM):
Research and rationale
The featured link provides a controlled way to offer promotional space “above the fold” on landing pages.
Policy rationale
It’s an optional pattern for the following mandatory templates:
Latest changes
- Updated the guidance to include content and design specifications, visual examples and implementation guidance
Page details
- Date modified: