From 2fc75f73e29474a919f80af32e5601874c03bcb4 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:21:03 -0500 Subject: [PATCH 1/9] feat: create layered theme page --- mandatory-templates/theme.md | 686 +++++++---------------------------- 1 file changed, 122 insertions(+), 564 deletions(-) diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index 790146f03b..e0498ce95e 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -1,570 +1,128 @@ --- altLangPage: https://conception.canada.ca/modeles-obligatoire/theme.html date: null -dateModified: '2024-09-24' -description: null -title: Theme page +dateModified: '2026-02-27' +description: Guidance on using a layered theme navigation page on Canada.ca. A layered theme navigation page allows people to find services and information from all Government of Canada websites grouped under one of the main themes of Canada.ca. +title: Layered theme page --- -
-

We have moved the topic page guidance. You can find it here: Topic page.

-
- -

- - Mandatory - -

-

Last updated: {{ page.dateModified }}

- -

- Theme pages provide access to topics and destination pages that support task completion. -

- -

- Theme pages: -

- - - -
-

- On this page -

- -
- -
-

- When to use -

-

- This template must be used for the theme page. -

-
- -
-

- What to avoid -

-

- Pages where people can initiate a task should be considered destination content, and should not use the theme template. -

-

- The theme template should not be used for promotion; instead, use - - Promotional events pages - - or - - Campaign pages. - -

-
- -
-

- How to implement -

-
- -
- -
-

- Theme page -

-
- - Guidance for the stable theme page - -
- - -
-
-
-
-
- - Theme page template - -
- Template of theme page showing sections that make up its structure. Read top to bottom and left to right. Specifications detailed below. -
-
-
-
-
-

- 1: Theme title -

-

- - Mandatory - -

-

- Describes the theme and page content -

-
    -
  • -
    - - - Presentation - - -
      -
    • - theme title must be a unique H1 -
      • -
    • - must be the first component on the page -
      • -
    -
    -
    • -
-
-
-

- 2: Theme introductory paragraph -

-

- - Mandatory - -

-

- Describes the top tasks and topics that can be accessed on this page -

-
    -
  • -
    - - - Content - - -
      -
    • - provides an overview of all top tasks that can be accomplished on the given theme -
      • -
    • - keep the text short and concise -
      • -
    • - written for a grade 6-8 reading level -
      • -
    -
    -
    • -
  • -
    - - - Presentation - - -
      -
    • - appears below the theme title -
      • -
    • - appears to the left of the theme image -
      • -
    -
    -
    • -
-
-
-

- 3: Theme image -

-

- - Optional - -

-

- Image is optional. Only use decorative images. -

-
    -
  • -
    - - - Presentation - - -
      -
    • - appears at the top of the page -
      • -
    • - appears to the right of the theme introductory paragraph -
      • -
    -
    -
    • -
-
-
-

- 4: Theme social media channels -

-

- - Conditional - -

-

- Features theme-specific social media channels -

-
    -
  • -
    - - - Content - - - -
    -
    • -
  • -
    - - - Presentation - - -
      -
    • - appears below the theme introductory paragraph -
      • -
    -
    -
    • -
-
-
-

- 5: Services and information -

-

- - Mandatory - -

-

- Features theme-specific topics -

-
    -
  • -
    - - - Content - - - -
    -
    • -
  • -
    - - - Presentation - - -
      -
    • - appears below the theme social media channels and to the left of “Most requested” -
      • -
    • - heading is labelled “Services and information” -
      • -
    -
    -
    • -
-
-
-

- 6: Most requested -

-

- - Mandatory - -

-

- Features theme-specific top tasks -

-
    -
  • -
    - - - Content - - - -
    -
    • -
  • -
    - - - Presentation - - -
      -
    • - appears to the right of “Services and information” -
      • -
    • - heading is labelled “Most requested” -
      • -
    -
    -
    • -
-
-
-

- 7: More information for -

-

- - Conditional - -

-

- Links to related government-wide audience information -

-
    -
  • -
    - - - Content - - -
      -
    • - this component is mandatory when there is 1 or more theme-related government-wide audience page or audience topic page that exist -
      • -
    • - use the - - More information for - - pattern -
      • -
    -
    -
    • -
  • -
    - - - Presentation - - -
      -
    • - appears below “Most requested” -
      • -
    • - heading is labelled “More information for” -
      • -
    -
    -
    • -
-
-
-

- 8: Theme features -

-

- - Mandatory - -

-

- Promotes theme-specific current activities being led by departments and agencies across the - - GC - -

-
    -
  • -
    - - - Content - - - -
    -
    • -
  • -
    - - - Presentation - - -
      -
    • - appears below “Services and information” -
      • -
    -
    -
    • -
-
-
-
-
- -

- Canada.ca is organized around 15 themes, based on an analysis of top tasks (most requested information and services) across the Government of Canada. -

-

- While the themes emphasize top tasks related to information and service delivery, they also provide a window into activities of the Government of Canada that are undertaken to support programs and services (for example, - research, consultation, policy development). -

-
-
- - User navigation diagram - -
- Diagram of how to navigate to theme pages on Canada.ca. Text version below: -
- - Text version - -

- Theme pages can be accessed from the Canada.ca home page. -

-
-
-
-
- -
-

- Latest changes -

-

- - 2024-09-24: - -

- -

- - 2020-07-10: - -

+ Mandatory + +**Last updated** {{ page.dateModified }} + +The layered theme page works as a series of pages performing the role of the primary navigation on Canada.ca. Theme pages provide access to topics and destination pages that support task completion. This allows users to navigate government-wide content through one of the main themes rather than by institutions. These pages also prioritize content and navigation by presenting the most visited information and services first. + +
+ +## On this page +- [When to use](#when-to-use) +- [What to avoid](#what-to-avoid) +- [Content and design](#content-and-design) +- [How to implement](#how-to-implement) +- [Research and rationale](#research-and-rationale) +- [Latest changes](#latest-changes) + +## When to use {#when-to-use} + +The layered theme template can only be used for theme pages. Only theme leads can use this template. + +## What to avoid {#what-to-avoid} + +Do not use the left-hand navigation pattern from this template on any other page type. This is for use on layered theme pages only. + +Do not put any links to social media channels. Instead, put these on topic pages. + +## Content and design {#content-and-design} + +The theme title must be a unique H1 and the first component on the page. + +Include the Most requested band below the theme title to feature top tasks. Use the [Most requested band pattern](https://design.canada.ca/common-design-patterns/most-requested.html). + +Add a link and brief description, also called doormats, for each theme-specific topic included on the page. Don’t repeat any of the links from the Most requested band. Use the 2 column variation of the [Services and information pattern](https://design.canada.ca/common-design-patterns/services-information.html). + +Include a contextual band in your footer. Use the [Contextual band pattern](https://design.canada.ca/common-design-patterns/site-footer-contextual.html). + +The sign in button is included by default and will link to the general sign in page. You can customize the link and button name to go to a specific sign in page or a page managing multiple accounts for your theme. Multiple account pages should be labeled “CRA sign in” or “IRCC sign in”, otherwise be specific to the account such as “Sign in to [account name]”. See the [contextual sign in button guidance](https://design.canada.ca/common-design-patterns/contextual-signin.html). + +You can include alerts when there is an urgent service disruption. Alert appears below the h1 inside the content of the right side. See the [guidelines for using alerts during a crisis](https://design.canada.ca/crisis/alerts.html). + +You can include up to three context-specific features above the footer. See the [guidance for context-specific features](https://design.canada.ca/common-design-patterns/feature-tiles.html). + +You can include a featured link when there is a need for a significant and temporary feature. See the [guidelines for using a featured link](https://design.canada.ca/common-design-patterns/featured-link.html). + +Customization requests will be considered on a case-by-case basis if your theme has the ability to research and monitor the impact of the customization. Please contact the Canada.ca Experience Office with any requests to deviate from the established template: + +- [cds.dto-btn.snc@servicecanada.gc.ca](mailto:cds.dto-btn.snc@servicecanada.gc.ca) + +### Visual examples + +
+
+
Layered theme page navigation - large screen
+ Layered theme page navigation for large screens. Text version below: +
+ Image description: layered theme page navigation - large screen +

The layered theme page navigation consists of a left hand navigation including all the themes, and the content of the selected theme appears on the right. The theme “Jobs” is selected and is highlighted in dark blue. A thick dark blue bar visually separates the navigation from the content.

+

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three theme context-specific features and a contextual footer for the theme’s contact information.

+
+
+
+
+
+
Layered theme page navigation - small screen
+ Layered theme page navigation for small screens. Text version below: +
+ Image description: layered theme page navigation - small screen +

In mobile the layered theme page navigation is a dark blue band that runs across the top with the text “Menu” and a chevron pointing down. When the user clicks the menu expands to expose all the themes.

+

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three theme context-specific features and a contextual footer for the theme’s contact information.

+
+
+
+ +## How to implement {#how-to-implement} + +Find working examples and code for implementing the layered theme page. + +### GCweb (WET) theme implementation reference + +The implementation reference includes how to configure the layered theme page. + +- [GCWeb (WET) layered theme documentation]() + +## Research and rationale {#research-and-rationale} + +Consult research findings and policy rationale. + +### Research findings + +[Wayfinding on Canada.ca research summary](https://design.canada.ca/research-summaries/wayfinding-on-canada-ca.html) +Research showing that people navigating on the site use breadcrumb links nearly twice as often as they use the Theme and topic menu. + +### Policy rationale + +The layered theme page is a mandatory template under the Canada.ca Specifications. +- [Mandatory elements of the design system](https://design.canada.ca/specifications/mandatory-elements.html) + + +## Latest changes {#latest-changes} + +
+
+
+

Stabilized and launched the layered theme page.

+
+
+
+

Updated the pattern to remove any reference of topic pages. Topic pages are now a separate pattern.

+
+
+
    -
  • - Changes to doormat columns in tablet view -
    • -
  • - Clarify social media account guidance -
    • +
  • Changes to doormat columns in tablet view.
    • +
  • Clarify social media account guidance.
-

- - 2020-06-30: - - A new beta version of this template was added -

-
+ +
+
+

A new beta version of this template was added.

+
+ \ No newline at end of file From 7b4d2219af41b2db7934f54bafa513770fab10e8 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:23:10 -0500 Subject: [PATCH 2/9] feat: update table entry --- ajax/patterns-01-en.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ajax/patterns-01-en.json b/ajax/patterns-01-en.json index 71cc407127..a34d6cb6a3 100644 --- a/ajax/patterns-01-en.json +++ b/ajax/patterns-01-en.json @@ -653,12 +653,12 @@ "MANDATORY": "No", "TANDP": "1" }, { - "NAME": "Theme page", + "NAME": "Layered theme page", "SOURCE": "Template and pattern library", - "DESCRIPTION": "Theme pages provide access to topics and destination pages that support task completion.", - "WHENTOUSE": "Allows people to discover services and information related to a specific theme across government - Mandatory template", - "CATEGORY": "Template", - "TYPE": "Theme template, Navigation", + "DESCRIPTION": " Guidance on using a layered theme navigation page on Canada.ca. A layered theme navigation page allows people to find services and information from all Government of Canada websites grouped under one of the main themes of Canada.ca.", + "WHENTOUSE": "Use for the main themes for Canada.ca, for theme-based navigation", + "CATEGORY": "Design pattern", + "TYPE": "Navigation, Site-wide pattern, layered theme template", "MANDATORY": "Mandatory", "TANDP": "1" }, { From 4b0420a1bcff7cd9930f7a522cdd6760462a62d6 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:28:33 -0500 Subject: [PATCH 3/9] feat: consistency in link names --- mandatory-templates/theme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index e0498ce95e..5be151c6a8 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -41,13 +41,13 @@ Add a link and brief description, also called doormats, for each theme-specific Include a contextual band in your footer. Use the [Contextual band pattern](https://design.canada.ca/common-design-patterns/site-footer-contextual.html). -The sign in button is included by default and will link to the general sign in page. You can customize the link and button name to go to a specific sign in page or a page managing multiple accounts for your theme. Multiple account pages should be labeled “CRA sign in” or “IRCC sign in”, otherwise be specific to the account such as “Sign in to [account name]”. See the [contextual sign in button guidance](https://design.canada.ca/common-design-patterns/contextual-signin.html). +The sign in button is included by default and will link to the general sign in page. You can customize the link and button name to go to a specific sign in page or a page managing multiple accounts for your theme. Multiple account pages should be labeled “CRA sign in” or “IRCC sign in”, otherwise be specific to the account such as “Sign in to [account name]”. See the [Contextual Sign in button pattern](https://design.canada.ca/common-design-patterns/contextual-signin.html). -You can include alerts when there is an urgent service disruption. Alert appears below the h1 inside the content of the right side. See the [guidelines for using alerts during a crisis](https://design.canada.ca/crisis/alerts.html). +You can include alerts when there is an urgent service disruption. Alert appears below the h1 inside the content of the right side. See the [guidance for using alerts during a crisis](https://design.canada.ca/crisis/alerts.html). -You can include up to three context-specific features above the footer. See the [guidance for context-specific features](https://design.canada.ca/common-design-patterns/feature-tiles.html). +You can include up to three context-specific features above the footer. See the [Context-specific features pattern](https://design.canada.ca/common-design-patterns/feature-tiles.html). -You can include a featured link when there is a need for a significant and temporary feature. See the [guidelines for using a featured link](https://design.canada.ca/common-design-patterns/featured-link.html). +You can include a featured link when there is a need for a significant and temporary feature. See the [Featured link pattern](https://design.canada.ca/common-design-patterns/featured-link.html). Customization requests will be considered on a case-by-case basis if your theme has the ability to research and monitor the impact of the customization. Please contact the Canada.ca Experience Office with any requests to deviate from the established template: From d1a7ff723faa58102418a993cf0b87ff0aaaf2f5 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:29:49 -0500 Subject: [PATCH 4/9] feat: qa --- mandatory-templates/theme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index 5be151c6a8..069825852a 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -95,6 +95,7 @@ Consult research findings and policy rationale. ### Research findings [Wayfinding on Canada.ca research summary](https://design.canada.ca/research-summaries/wayfinding-on-canada-ca.html) + Research showing that people navigating on the site use breadcrumb links nearly twice as often as they use the Theme and topic menu. ### Policy rationale From 708174fa5df88ab73890ce82d607f6b8f26456ec Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:30:44 -0500 Subject: [PATCH 5/9] feat: qa --- mandatory-templates/theme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index 069825852a..0704d0fa63 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -118,8 +118,8 @@ The layered theme page is a mandatory template under the Canada.ca Specification
    -
  • Changes to doormat columns in tablet view.
    • -
  • Clarify social media account guidance.
    • +
  • Changes to doormat columns in tablet view
    • +
  • Clarify social media account guidance
From c61db94a474e28c2fe0308580a0a9fe90222788b Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:36:28 -0500 Subject: [PATCH 6/9] feat: qa --- ajax/patterns-01-en.json | 2 +- mandatory-templates/theme.md | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ajax/patterns-01-en.json b/ajax/patterns-01-en.json index a34d6cb6a3..52707c8e3d 100644 --- a/ajax/patterns-01-en.json +++ b/ajax/patterns-01-en.json @@ -655,7 +655,7 @@ }, { "NAME": "Layered theme page", "SOURCE": "Template and pattern library", - "DESCRIPTION": " Guidance on using a layered theme navigation page on Canada.ca. A layered theme navigation page allows people to find services and information from all Government of Canada websites grouped under one of the main themes of Canada.ca.", + "DESCRIPTION": "Guidance on using a layered theme navigation page on Canada.ca. A layered theme navigation page allows people to find services and information from all Government of Canada websites grouped under one of the main themes of Canada.ca.", "WHENTOUSE": "Use for the main themes for Canada.ca, for theme-based navigation", "CATEGORY": "Design pattern", "TYPE": "Navigation, Site-wide pattern, layered theme template", diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index 0704d0fa63..ea1e5f3551 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -57,23 +57,23 @@ Customization requests will be considered on a case-by-case basis if your theme
-
Layered theme page navigation - large screen
- Layered theme page navigation for large screens. Text version below: +
Layered theme navigation page - large screen
+ Layered theme navigation page for large screens. Text version below:
- Image description: layered theme page navigation - large screen -

The layered theme page navigation consists of a left hand navigation including all the themes, and the content of the selected theme appears on the right. The theme “Jobs” is selected and is highlighted in dark blue. A thick dark blue bar visually separates the navigation from the content.

-

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three theme context-specific features and a contextual footer for the theme’s contact information.

+ Image description: layered theme navigation page - large screen +

The layered theme navigation page consists of a left hand navigation including all the themes, and the content of the selected theme appears on the right. The theme “Jobs” is selected and is highlighted in dark blue. A thick dark blue bar visually separates the navigation from the content.

+

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three context-specific features for the theme and a contextual footer for the theme’s contact information.

-
Layered theme page navigation - small screen
- Layered theme page navigation for small screens. Text version below: +
Layered theme navigation page - small screen
+ Layered theme navigation page for small screens. Text version below:
- Image description: layered theme page navigation - small screen -

In mobile the layered theme page navigation is a dark blue band that runs across the top with the text “Menu” and a chevron pointing down. When the user clicks the menu expands to expose all the themes.

-

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three theme context-specific features and a contextual footer for the theme’s contact information.

+ Image description: layered theme navigation page - small screen +

In mobile the layered theme navigation page is a dark blue band that runs across the top with the text “Menu” and a chevron pointing down. When the user clicks the menu expands to expose all the themes.

+

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three context-specific features for the theme and a contextual footer for the theme’s contact information.

From 3b69107b2b8d23bee3cd0700b04eb1d5dece1f8e Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 19:40:04 -0500 Subject: [PATCH 7/9] feat: qa --- mandatory-templates/theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index ea1e5f3551..0d744ce716 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -86,7 +86,7 @@ Find working examples and code for implementing the layered theme page. The implementation reference includes how to configure the layered theme page. -- [GCWeb (WET) layered theme documentation]() +- [Layered theme page documentation - GCWeb]() ## Research and rationale {#research-and-rationale} From aaee83d2a0c2ce4c87e2c1a9b48b3cf3934c80eb Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 20:05:59 -0500 Subject: [PATCH 8/9] feat: qa --- mandatory-templates/theme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/mandatory-templates/theme.md b/mandatory-templates/theme.md index 0d744ce716..fae61a2b0c 100644 --- a/mandatory-templates/theme.md +++ b/mandatory-templates/theme.md @@ -69,11 +69,11 @@ Customization requests will be considered on a case-by-case basis if your theme
Layered theme navigation page - small screen
- Layered theme navigation page for small screens. Text version below: + Layered theme navigation page for small screens. Text version below:
Image description: layered theme navigation page - small screen

In mobile the layered theme navigation page is a dark blue band that runs across the top with the text “Menu” and a chevron pointing down. When the user clicks the menu expands to expose all the themes.

-

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in two columns to navigate further into the theme. Below the theme navigation section is the heading “Features” and three context-specific features for the theme and a contextual footer for the theme’s contact information.

+

The active theme content includes the theme heading, most requested items in a band, which is then followed by links and descriptions in a single column to navigate further into the theme. Below the theme navigation section is the heading “Features” and three context-specific features for the theme and a contextual footer for the theme’s contact information.

@@ -86,7 +86,7 @@ Find working examples and code for implementing the layered theme page. The implementation reference includes how to configure the layered theme page. -- [Layered theme page documentation - GCWeb]() +- [Layered theme page documentation - GCWeb (BOEW)]() ## Research and rationale {#research-and-rationale} From 1af3fb39802c6fff3f53d24fc155693e5806c9f9 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 20:12:12 -0500 Subject: [PATCH 9/9] feat: qa --- ajax/patterns-01-en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ajax/patterns-01-en.json b/ajax/patterns-01-en.json index 52707c8e3d..b5de1e1674 100644 --- a/ajax/patterns-01-en.json +++ b/ajax/patterns-01-en.json @@ -656,7 +656,7 @@ "NAME": "Layered theme page", "SOURCE": "Template and pattern library", "DESCRIPTION": "Guidance on using a layered theme navigation page on Canada.ca. A layered theme navigation page allows people to find services and information from all Government of Canada websites grouped under one of the main themes of Canada.ca.", - "WHENTOUSE": "Use for the main themes for Canada.ca, for theme-based navigation", + "WHENTOUSE": "Use for the main themes for Canada.ca, for theme-based navigation.", "CATEGORY": "Design pattern", "TYPE": "Navigation, Site-wide pattern, layered theme template", "MANDATORY": "Mandatory",