Canada.ca theme
The page templates and design patterns below comprise a reference implementation of the Canada.ca design system, including the mandatory requirement of the Content and Information Architecture (C&IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via GCWeb github repository.
This current implementation reference match the version 2.0 of the C&IA Specification released on January 2019.
- GCWeb v5 Summary and others technical notes
- GCWeb v5 Technial migration instruction
- Templates and common design patterns
- Plugins exclusive to this theme
- Notes and others ressources
- Evaluation and report
Found an C&IA implementation issue or you want to contribute at their development, let us know by submiting GCweb issue, sending pull request or by participating at one of our WET-BOEW weekly Tuesday code sprint.
Meaning of statuses
- Up to spec
- Meet the latest published C&IA specification.
- Stable
- Meet the latest published specification.
- Informational
- It's for your information. It's complete and suggestive but not defined by and from a specification yet.
- Need to revalidate
- Was meeting the preceding published specification, but it need to be manually revalidated to ensure it continues to meet the latest published specification.
- Partial
- Partially up to spec or partially stable in order to meet other core web standards such WCAG 2.0 Level AA.
- Outdated
- Don't meet the latest specification but met a previous version. It requires updates.
- Backlog
- Need to be developped.
- Incomplete
- Incomplete because it don't fully meet all the specification yet. Still need developpement work.
- Deprecated
- Do not use because it's deprecated, but listed here for your information.
Templates and common design patterns
| Working example | Last update | Category | Description | Status | Specification | Version |
|---|---|---|---|---|---|---|
| Splash page | Templates | The initial landing page for a visitor to Canada.ca, allowing the option to enter the site in French or English | Need to revalidate | C&IA | v1.4 | |
| Home page | Templates/Home | Shows the Government of Canada's most visited and important products and services | Up to spec | C&IA | v2.0 | |
| Theme page | Templates | Theme page types and templates are user-tested pages which provide access to topics and destination pages that support task completion. | Need to revalidate | C&IA | v1.4 | |
| Topic page | Templates | Topic pages help people learn everything the Government of Canada is doing in relation to a specific topic area. | Need to revalidate | C&IA | v1.4 | |
| Departments and agencies page | Templates | Provides links to all federal government institutions | Need to revalidate | C&IA | v1.4 | |
| Institutional profile page | Templates/Profile pages | An institutional profile page represents the landing page for a Government of Canada institution on Canada.ca. | Need to revalidate | C&IA | v1.4 | |
| Institutional profile page for arm’s-length institutions | Templates/Profile pages | An institutional profile page represents the landing page for a Government of Canada institution that meet the criteria for Arm’s Length on Canada.ca. | Need to revalidate | C&IA | v1.4 | |
| Organizational profile page | Templates/Profile pages | Single landing page on Canada.ca for an organization that is associated with a Government of Canada institution. | Need to revalidate | C&IA | v1.4 | |
| Organizational profile page for arm's-length institutions | Templates/Profile pages | An organizational profile page represents the single landing page on Canada.ca for an organization that meet the arm’s-length criteria. | Need to revalidate | C&IA | v1.4 | |
| Partnering and collaborative arrangement profile page | Templates | A partnering/collaborative arrangement profile page represents the single landing page on Canada.ca for an entity that is associated with 1 or more Government of Canada institutions. | Backlog | C&IA | ||
| Service initiation page | Templates/Service initiation pages | Focus on helping Canada.ca visitors start a task. | Need to revalidate | C&IA | v1.4 | |
| Service initiation page: single step only | Templates/Service initiation pages | Focus on helping Canada.ca visitors start a single step only task. | Need to revalidate | C&IA | v1.4 | |
| Institutional service performance reporting page | Templates | Institutional service performance reporting pages collect all service standards from an institution and provide annual performance reporting information, as per the requirements of the Policy on Service. | Need to revalidate | C&IA | v1.4 | |
| Program description page | Templates | A program description page provides information about an internal administrative activity that delivers a service. | Backlog | C&IA | ||
| Ministerial profile page | Templates | A ministerial profile page is the landing page for a minister in the Government of Canada, which includes biographical information along with links to initiatives and recent activities related to the minister. | Need to revalidate | C&IA | v1.4 | |
| Consultation profile page | Templates | Consultation profile pages provide access to Government of Canada consultations and engagement activities. | Backlog | C&IA | ||
| Act profile page | Templates/Laws and regulations pages | Provides access to Government of Canada acts. | Need to revalidate | C&IA | v1.4 | |
| Regulation profile page | Templates/Laws and regulations pages | Provides access to Government of Canada regulations. | Need to revalidate | C&IA | v1.4 | |
| Guidance on legislation profile page | Templates | Guidance on legislation provides information to facilitate awareness, understanding, and compliance with statutory and regulatory requirements and may also describe their administration. Guidance on legislation does not establish new requirements and is not legally binding. | Backlog | C&IA | ||
| Government-wide audience page | Templates | Gives access to information and services relevant to a government-wide audience. | Need to revalidate | C&IA | v1.4 | |
| News landing page | Templates/News pages | Landing page for displaying News. | Need to revalidate | C&IA | v1.4 | |
| News results page | Templates/News pages | Search result pages when searching for news. | Backlog | C&IA | ||
| News product page | Templates/News pages | Single news page template | Backlog | C&IA | ||
| Campaign page - Example 1 | Templates/Campaign pages | Campaign pages are time-limited, promotional pages that respond to the Government of Canada's desire to communicate, educate, influence, market, raise awareness and call to action. | Need to revalidate | C&IA | v1.4 | |
| Campaign page - Example 2 | Templates/Campaign pages | Informational | ESDC | v1.1 | ||
| Promotional events page | Templates | A promotional events page is a destination page that describes and explains an official government-hosted event that occurs in a promotional context, such as a festival, a celebration and an awards ceremony. | Need to revalidate | C&IA | v1.4 | |
| Contact us page | Templates | Institutional contact page | Need to revalidate | C&IA | v1.4 | |
| Search page | Templates | Provides the template for the search engine on Canada.ca | Backlog | C&IA | ||
| Short index page | Templates/Index | Addresses lists of 10 to 50 items in length. | Backlog | C&IA | ||
| Long index page | Templates/Index | Lists that have over 50 items, requiring 3 or more screen-lengths of scrolling. | Incomplete | C&IA | v1.5 | |
| Finder page | Templates/Index | Common design template for filtering a large set of pages, documents or data with shared characteristics. | Backlog | C&IA | ||
| Faceted finder page | Templates/Index | Lists of over 100 items and for Canada.ca collections | Backlog | C&IA | ||
| Content page | Templates | Generic destination pages | Up to spec | C&IA | v2.0 | |
| Content page - Limited width content | Templates | Generic destination pages | Up to spec | C&IA | v2.0 | |
| Content page - GCWeb 4.0.29 font style | Transitionary to C&IA v1.5+ | Force a page or a section of a page to use the GCWeb 4.0.29 font style. | Informational | |||
| Archived page | Templates | Archived page | Informational | |||
| Content page - Signed Off | Templates | Signed Off/On | Informational | |||
| Content page - Signed On | Templates | Signed Off/On | Informational | |||
| Feedback form | Templates | Feedback form | Informational | |||
| Server message page | Templates | Server message page | Informational | |||
| Server message page - English/French | Templates | Server message page | Informational | |||
| 404 error page | Templates | 404 error page | Informational | |||
| 404 error page - English/French | Templates | 404 error page | Informational | |||
| Search results page | Templates/Search | For search results from across the Government of Canada. | Stable | Search template specification | v2.0 | |
| Contextual search results page | Templates/Search | For search results that are filtered to a search context. | Stable | Search template specification | v2.0 | |
| Search facets/filters results | Templates/Search | For search results that are accompanied by faceted filter boxes. | Partial | Search template specification | v2.0 | |
| Starting page for search | Templates/Search | For search results that are accompanied by faceted filter boxes. | Backlog | Search template specification | v2.0 | |
| Advanced search page | Templates/Search | For search results that are accompanied by faceted filter boxes. | Backlog | Search template specification | v2.0 | |
| Global header navigation | Header, footer, navigation | The top tasks from all Government of Canada websites are organized into topics and then grouped into the 15 main themes of Canada.ca, represented in the header. | Backlog | C&IA | ||
| Other header elements | Header, footer, navigation | In addition to the global navigation menu, the header includes additional branding and functional elements. | Backlog | C&IA | ||
| Main content footer | Header, footer, navigation | The main content footer appears after the main content of the page, and above the global site footer. | Backlog | C&IA | ||
| Global footer navigation | Header, footer, navigation | The global (site-wide) footer at the bottom of each web page contains links to Government of Canada corporate content, and to Government of Canada content repositories. | Backlog | C&IA | ||
| Reduced header and footer | Header, footer, navigation | Provides flexibility for specific situations in which full application of the global header and footer impede task success, while maintaining overall consistency in the experience | Backlog | C&IA | ||
| Transactional scenarios | Header, footer, navigation | Pages where people are engaged in a transactional process. | Backlog | C&IA | ||
| In-page table of contents | 2018-03-02 | Header, footer, navigation/In-page navigation | List of links that lead to subsections of the same page. | Need to revalidate | C&IA | v1.4 |
| Ordered multi-page navigation (step-by-step) | Header, footer, navigation/In-page navigation | Group of several pages intended to be read in a preferred order. | Backlog | C&IA | ||
| Tabbed interface | Header, footer, navigation/In-page navigation | Separates related content into different panes that are viewable one at a time when the respective tab is clicked. | Backlog | C&IA | ||
| Buttons (WET alternative) | Common design patterns | Use to encourage a person to take action |
|
C&IA | ||
| Carousels (WET alternative) | Common design patterns | Use to promote multiple different activities, initiatives, programs, and services |
|
C&IA | ||
| Charts and graphs (WET alternative) | Common design patterns | Use as visualization techniques for communicating data or statistics |
|
C&IA | ||
| Collapsible content (WET alternative) | Common design patterns | Use to hide secondary content until requested. |
|
C&IA | ||
| Contact information (GCWeb alternative) | Common design patterns | Use to present contact information on Canada.ca page |
|
C&IA | ||
| Context-specific features | Common design patterns | Use to promote activities, initiatives, programs, and services | Need to revalidate | C&IA | v1.5 | |
| Contextual alerts (WET alternative) | Common design patterns | Use to present important new information that needs to appear in a pre-existing context |
|
C&IA | ||
| Contributors | Common design patterns | Use to link to institutions or organizations that support the content on the page | Backlog | C&IA | ||
| Data tables (WET alternative) | Common design patterns | Use to communicate data |
|
C&IA | ||
| Disclaimer overlay (WET alternative) | Common design patterns | Use to display privacy statements and similar forms of disclaimer |
|
C&IA | ||
| Download links | Common design patterns | Use to reference and link to non-HTML files | Need to revalidate | C&IA | v1.4 | |
| Icons (WET alternative) | Common design patterns | Use as symbols to communicate actions or states |
|
C&IA | ||
| Images (WET alternative) | Common design patterns | Use to complement or enhance text |
|
C&IA | ||
| Institutional byline (GCWeb alternative) | Common design patterns | Use to link to the institution responsible for the content |
|
C&IA | ||
| Interactive questions | Common design patterns | Use to present a sequence of simple questions that leads to answer needed to continue or complete task | Backlog | C&IA | ||
| Latest news (GCWeb alternative) | Common design patterns | Use to feature the most recent news items |
|
C&IA | ||
| More information for (GCWeb alternative) | Common design patterns | Use to connect to a related government-wide audience |
|
C&IA | ||
| Most requested (GCWeb alternative) | Common design patterns | Use to feature top tasks related to the page it is on |
|
C&IA | ||
| Multimedia (video and audio) | Common design patterns | Use to complement or enhance text | Need to revalidate | C&IA | v1.4 | |
| Promotional feature banner | Common design patterns | Use to promote government-wide and institution-specific activities, initiatives, programs, and services. | Backlog | C&IA | ||
| Related links | Common design patterns | Use to list links to content related to the page | Backlog | C&IA | ||
| Services and information | Common design patterns | Use to present sets of links with accompanying descriptions (Doormat link) | Up to spec | C&IA | v2.0 | |
| Social media channels block (follow box) (GCWeb alternative) | Common design patterns | Use to allow people to follow official Government of Canada social media accounts from various social media platforms |
|
C&IA | ||
| Social media feeds widget | Common design patterns | Use to embed the latest posts from official Government of Canada social media accounts | Need to be revalidate | C&IA | v1.4 | |
| What we are doing (GCWeb alternative) | Common design patterns | Use to link to content that provides background or explanations of GC activities in support of creating or improving public policy |
|
C&IA |
Themes plugins
- Data JSON (Documentation)
- Do action (Documentation)
- Template HTML5 (Documentation)
- JSON Manager (Documentation)
- URL Mapping - Table filtering (Documentation)
- URL Mapping - Ajax (Documentation)
- URL Mapping - Patching JSON (Documentation)
- URL Mapping - Geomap filtering (Documentation)
- Field flow (Documentation)
- Field flow basic configuration (Documentation)
- Field flow advanced (Documentation)
Notes and other resource
Evaluation and report
- November 16, 2018: 2 - Regression user acceptance testing of WET plugin for GCWeb theme version 2
- November 14, 2018: 1 - Accessibility assesment of GCWeb theme version 2
Report a problem on this page
- Date modified: