Global footer: Contextual band: Canada.ca design system
Last updated: 2023-04-06
Optional
The contextual footer band is an optional element of the global footer.
It provides support links that are specific to an entire group of pages, such as contact details for a program. A group of pages might be an entire theme, all the pages related to a specific program or service, or all the pages related to a single organization.
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
- What to avoid
- Content and design
- How to implement
- Research and rationale
- Latest changes
- Discussion
When to use
The footer generally acts as a rescue for people. They check it if they don't find what they want in the main content of the page.
Use a contextual footer band when you have a consistent set of rescue links that should be available throughout a specific group of pages.
- For example, the Taxes theme pages could have a contextual footer band with a link to Contact the CRA.
Tip: If your pages have previously had a contextualized Contact us link in the global footer, you should add a contextual footer band.
What to avoid
The content of this band shouldn’t duplicate the Government of Canada links in the main footer band.
Don’t use this band for a single page. It should apply to a group of related pages.
Content and design
Include only 1 contextual footer band on any page.
Content specifications
Limit this band to a single row with a maximum of 3 links.
Include a heading that’s relevant to the content in this band, such as the name of the organization, theme or program.
Remember that it's a rescue pattern when you're choosing content for this band. It’s ok if something like a contact link appears in both the content area and the footer. If you have a page that has contact information in the body, it’s ok to have another contact link in the footer.
Choose links that people will expect to find in a footer based on web conventions. Common contextual footer links could include:
- Contact [...] or [...] Contacts (link to the organization or program contact page)
- Careers (link to job postings)
- News (or other curated indexes such as consultations)
Design specifications
Design specifications for this band are:
- Background colour: Contextual footer blue (#33465c)
- Text colour: white (#FFFFFF)
- Font family:
- header: Lato
- links: Noto Sans
- Text size (base size for the footer is 16px):
- header: 19px or 1.2em
- links: 14px or 0.875em
- Font weight:
- header: 700 or bold
- links: 400 or regular
- Columns: 3 column in large and medium screen formats, 1 column in small screen format
Visual examples
The contextual band should remain the same for the whole group of pages under the theme or institution.
Text version
Contextual band for the Veterans and military theme with the title “Contacts” and 3 contextual links: “Veterans contacts,” “Military contacts,” and “Contact the RCMP”
Text version
Contextual band for an institution with the title “Agriculture and Agri-Food Canada” and 3 contextual links: “Contact AAFC,” “News,” and “Consultations”
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
- Added links to the research summary and blog post for the Wayfinding project
- Added guidance for this new pattern
Discussion
Page details
- Date modified: