Global footer: Sub-footer band: Canada.ca design system
Last updated: 2023-04-06
Mandatory
The sub-footer band is a secondary element of the global footer. It contains a series of corporate links and the Canada wordmark.
2022 design update: We’ve recently updated this pattern as part of a new navigation strategy coming out of the Wayfinding research project. To find out more about this project, visit the Research and rationale section on this page.
On this page
When to use
The sub-footer band is mandatory on all page types.
Content and design
Content specifications
Links appear in the following order:
- Social media
- Mobile applications
- About Canada.ca
- Terms and conditions - can be contextualized to link to the Terms and conditions of the department or program responsible for the content on that page
- Privacy - can be contextualized to link to the privacy information of the department or program responsible for the content on that page
On transactional and campaign pages, you can omit the Social media, Mobile applications and About Canada.ca links.
On transactional pages, ensure that the Terms and conditions and Privacy links keep people within their current session (for authenticated applications, keep them within the application environment).
Canada wordmark
Include the Canada wordmark in the sub-footer band across all pages of Canada.ca. This serves to reinforce the brand and provide an additional cue to people that they are reading content from the Government of Canada.
Design specifications
- Background colour: sub-footer grey (#F8F8F8)
- Text colour: standard link colours
- Text size: 14 px or 0.875 em
- Font: Noto Sans
- Canada wordmark position: set to the right
- Canada wordmark size: 40px height
- Layout: 1 row in large screen format, 2 columns in medium screen format, 1 column in small screen format
Visual examples
Standard pages (desktop and mobile)
Text version
On large screens the sub-footer band contains links to “Social media,” “Mobile applications,” “About Canada.ca,” “Terms and conditions,” and “Privacy,” all aligned to the left in a single row. It also includes the Canada wordmark in the same row, aligned to the right.
Text version
On small screens the sub-footer band contains links to “Social media,” “Mobile applications,” “About Canada.ca,” “Terms and conditions,” and “Privacy,” arranged in 2 columns. Below these links is a final row with the Canada wordmark aligned to the right.
Transactional and campaign pages (desktop and mobile)
Text version
On large screens, the minimum sub-footer for transactional and campaign pages includes only the links to “Terms and conditions” and “Privacy.” These are aligned to the left in a single row. It also includes the Canada wordmark in the same row, aligned to the right.
Text version
On small screens, the minimum sub-footer for transactional and campaign pages includes only the links to “Terms and conditions” and “Privacy.” Below these links is a final row with the Canada wordmark aligned to the right.
How to implement
GCweb (WET) theme implementation reference
Default
Alternate options for standard pages
Alternate options for transactional or campaign pages
Implementations
Determine the footer configuration that best suits your needs for the type of page you're creating. Refer to your implementation's guidance to customize the contextual band or sub-footer band links.
GC-AEM
For the Government of Canada Adobe Experience Manager (AEM):
CDTS
For the Centrally Deployed Templates Solution (CDTS):
Drupal WxT
For Drupal WxT:
2023 footer update:
Research and rationale
We updated the global footer for Canada.ca to align with a new overall navigation strategy that came out of the Wayfinding research project.
- Wayfinding on Canada.ca research summary
This summary explains the context of the research and the insights that drove the design updates. - Wayfinding research project improves our approach to navigation on Canada.ca
This blog post explains the changes that are being made to the Canada.ca design, and how they are being implemented.
Latest changes
- Added links to GC-AEM, CDTS and Drupal WxT implementation guidance
- Clarified that on transactional pages, the Terms and conditions and Privacy links should keep people within their current session
- Added links to the research summary and blog post for the Wayfinding project
- Created a new page for guidance specific to this band, updated content specifications to include Canada wordmark, added design specifications and visual examples
Discussion
Page details
- Date modified: