GCWeb, the WET-BOEW 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.
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 weekly WET office hours (formerly known as WET-BOEW code sprint) every Tuesday.
Meaning of statuses
- Stable
- Meet the latest published specification.
- Provisional
- Relatively stable, yet experimental; use at your own risks.
- Deprecated
- Do not use because it's deprecated, but listed here for your information.
- Undefined
- Missing State in the component documentation.
Components
-
Bold content State: Stable
This component applies font weight bold to every text element inside it and generates normal font weight when the element
<strong>is applied.All examples and info
- Examples
- Documentations
-
Checkboxes and radio buttons State: Stable
Display check boxes and radio buttons that are bigger than natively provided by browsers and in-line with the Canada.ca design system.
All examples and info
-
Contributors State: Stable
Links to institutions or organizations that support the content on the page.
All examples and info
- Documentations
- Examples
-
Download link State: Stable
Download link with custom styles.
All examples and info
- Examples
-
Featured link State: Stable
This adds a featured link to a page that your institution needs to feature prominently.
All examples and info
-
Context-specific features State: Stable
In-page components used to promote government activities, initiatives, programs and services.
All examples and info
- Documentations
- Examples
- Reports
-
Social media channels State: Stable
The social media channels pattern provides links to official Government of Canada (GC) social media accounts.
All examples and info
-
Minister or institutional head State: Stable
This component is for the minister or institutional head pattern on the institutional landing page.
All examples and info
- Examples
- Documentations
-
Most requested State: Stable
Features top tasks related to the page it is on.
All examples and info
-
Services and information State: Stable
Used to present sets of links with accompanying descriptions.
All examples and info
-
Step by Step navigation State: Stable
Step by Step navigation designed based on user experience testing
All examples and info
-
GC Subway map menu State: Provisional
Break up long and complex content into pages that each focus on a step or specific answer people need before moving to the next step or section.
All examples and info
- Examples
- Index page
- Page d'introduction
- Section page
- Page de section
- Sub-section page (default)
- Page de sous-section (par défaut)
- Sub-section page (no line)
- Page de sous-section (sans ligne)
- Section page with custom subtitle
- Page de section avec sous-titre personnalisé
- Section page with related information
- Page de section avec information additionnelle
- Section page with bad AEM implementation
- Exemple de page de section avec mauvaise implémentation dans AEM
- Documentations
- Examples
-
GC tables State: Provisional
A simple CSS solution to turn tables into responsive cards for smaller windows.
-
Table of Contents State: Stable
Table of Contents to navigate on same page subsections
All examples and info
-
Well header responsive State: Stable
Support use case for promotional page header or panel section header the width of the well header is readjusted based on the view port.
All examples and info
-
Images State: Stable
Apply WET-BOEW simple styles or modify an image without use of editing software.
-
Other components State: Stable
Components included but need to move in its own folder.
All examples and info
- Examples
- Provisional functionality
- Fonctionalités provisoires
- Redacted text
- Texte caviardé
- Download link, In-page table of contents, Alerts designs
- Lien de téléchargement, Table des matières à l’intérieur de la page, Conceptions des avis
- Deprecated markup - Report a problem (v4.0.28), gc-nttvs, gc-prtts
- Balisage déconseillé - Signaler un problème (v4.0.28), gc-nttvs, gc-prtts
- Float column in a data table
- Float column in a data table
- Video example
- Exemple de vidéo
- Examples
-
Labels State: Stable
Labels including all various states.
All examples and info
-
List - Additional style State: Stable
Additional style (double spaced)
All examples and info
-
Chat wizard State: Deprecated
Transforms a simple form into a conversation like experience used as a wizard.
All examples and info
-
Do action State: Stable
Execute action, like filter a table, based on pre-established set of configuration.
All examples and info
-
Fieldflow State: Stable
Provide an alternative user interface when a page contains a really long list
All examples and info
- Examples
- Documentations
-
Datalist dynamic suggestion State: Stable
Load datalist suggestion from a JSON file
All examples and info
-
URL Mapping State: Stable
Execute pre-configured ajax action based on url query string.
All examples and info
-
wb5-click postback converter State: Deprecated
Convert deprecated wb5-click postback form syntax to wb-postback plugin
All examples and info
Templates
-
Advanced Service - Probably deprecated State: Stable
Probably deprecated - template for advanced service
All examples and info
- Examples
- [Service name] - 1. [Step / section page name]
- [Nom du service] - 1. [Nom de la page de la section ou de l’étape]
- [Service name] - 2. [Step / section page name]
- [Nom du service] - 2. [Nom de la page de la section ou de l’étape]
- [Service name] - 3. [Step / section page name]
- [Nom du service] - 3. [Nom de la page de la section ou de l’étape]
- [Service name] - 4. [Step / section page name]
- [Nom du service] - 4. [Nom de la page de la section ou de l’étape]
- [Service name] - 5. [Step / section page name]
- [Nom du service] - 5. [Nom de la page de la section ou de l’étape]
- [Service name] - 6. [Step / section page name]
- [Nom du service] - 6. [Nom de la page de la section ou de l’étape]
- Examples
-
All services State: Stable
All services page template.
All examples and info
- Examples
- Documentations
-
Application State: Stable
Application templates samples.
-
Campaign name State: Stable
Campaign name templates samples
All examples and info
- Examples
- Documentations
-
Content page State: Stable
Blank content pages with text sample.
-
Home State: Stable
Home templates
All examples and info
- Examples
- Documentations
- Reports
-
Other template State: Stable
Template included but need to move in its own folder.
All examples and info
- Examples
- Stay connected
- Restez branché
- [Theme title]
- [Titre du thème]
- Departments and agencies
- Ministères et organismes
- Promotional events page (Campaign?)
- Activité promotionel (Campagne?)
- Feedback form
- Formulaire de rétroaction
- [Audience name]
- [Public cible]
- Service initiation - Might deprecated
- Initiation de service - Probablement désuet
- Examples
-
Index State: Stable
Index templates
All examples and info
- Examples
- Documentations
-
Institutional landing page State: Stable
Institutional landing page template documentation and working example.
All examples and info
- Documentations
- Examples
- Reports
-
Institutional profile State: Stable
Institutional profile templates
All examples and info
- Examples
- Contact [Institution name]
- Coordonnées [nom de l’institution]
- [Institution] service performance reporting for fiscal year 2015 to 2016
- Compte rendu du rendement des services de [Nom de l’institution] pour l’exercice financier de 2015 à 2016
- arm’s length - [Institution Name]
- organisme indépendamment - [Nom de l’institution]
- Related documents
- Examples
-
Laws and regulations pages State: Stable
The laws and regulations collection provides access to Government of Canada acts and regulations through their individual profiles.
-
Ministerial profile State: Stable
Ministerial profile templates documentation and example
All examples and info
- Documentations
- Examples
-
News State: Stable
News templates samples
All examples and info
- Documentations
- Examples
-
Organizational profile State: Stable
Organizational profile templates
All examples and info
-
Search results State: Stable
Search templates
All examples and info
- Examples
- Documentations
- Implementation reference
-
Server error message State: Stable
Error server page
All examples and info
- Examples
- We couldn't find that Web page (Error 404) - Canada.ca theme
- Nous ne pouvons trouver cette page Web (Erreur 404) - Thème Canada.ca
- We couldn't find that Web page (Error 404) - Canada.ca theme / Nous ne pouvons trouver cette page Web (Erreur 404) - Thème Canada.ca
- Nous ne pouvons trouver cette page Web (Erreur 404) - Thème Canada.ca / We couldn't find that Web page (Error 404) - Canada.ca theme
- Message title - Canada.ca theme
- Titre du message - Thème Canada.ca
- Message title - Canada.ca theme / Titre du message - Thème Canada.ca
- Titre du message - Thème Canada.ca / Message title - Canada.ca theme
- Examples
-
Splash page - Canada.ca State: Stable
Splash page example
All examples and info
- Examples
- Documentations
-
Thematic State: Provisional
Site variant where a thematic is applied
All examples and info
- Documentations
- Examples
-
Topic State: Stable
Topic template examples
All examples and info
- Examples
- [Topic title]
- [Titre du sujet]
- [Topic title with stacked header]
- [Titre du sujet avec en-tête superposé]
- Theme/Topic page - Deprecated as of GCWeb v16.0.0
- Page de sujet/thème - Obsolète à partir de GCWeb v16.0.0
- Lowest topic (with secondary navigation) - Deprecated as of GCWeb v16.0.0
- Sujet de plus bas niveau (avec une navigation secondaire) - Obsolète à partir de GCWeb v16.0.0
- Documentations
- Examples
Design patterns
-
About the institution pattern
Section on an institutional landing page that provides links to corporate, program and policy information
All examples and info
- Documentations
- Examples
-
Introduction block
Guidance about using the introduction block component on Canada.ca.
Special features
Experimentation
The experimentation hub you have been waiting for! The méli-mélo compilation which include experimental code allow you to bring in some awesome new code you would usually consider "custom" to the Canada.ca theme.
Promotional thematics
Do you have a set of pages that use an original look related to a specific promotion? Try this special hub for promotional thematics instead.
Sites and global functionality
Core components for the Canada.ca theme
-
Archived - template State: Stable
Gobal demoed feature included but need to move in its own folder.
All examples and info
- Examples
- Documentations
-
Authentication State: Stable
Documentation and working example on how to use the contextual sign in button.
All examples and info
- Documentations
- Examples
- Contextual Sign in button
- Bouton contextuel « Se connecter »
- Contextual Sign in button with extended custom label
- Bouton contextuel « Se connecter » avec libellé personnalisé étendu
- Contextual Sign in button without custom labels
- Bouton contextuel « Se connecter » sans aucun libelés personnalisés
- Contextual Sign in button without the GCWeb Menu
- Bouton contextuel « Se connecter » sans le menu GCWeb
- Content page - Signed-Off pattern
- Page de contenu - Modèle de session fermée
- Content page - Signed-On pattern
- Page de contenu - Modèle de session ouverte
- Active user session
- Session utilisateur active
-
Breadcrumb trail State: Stable
Indicates the location of the current page in relation to its parent in the site structure to reinforce a visitor’s current location in the Canada.ca user navigation model.
All examples and info
- Documentations
-
Date modified State: Stable
Indicates the date on which the current page was last modified.
All examples and info
- Documentations
-
Feedback area State: Stable
Documentation on how to use the elements of the feedback area.
All examples and info
- Documentations
- Examples
- Reports
- Accessibility assessment #1
- Évaluation de l'accessibilité #1
- Accessibility Conformance Report - WCAG Level AA - Autumn 2023
- Rapport de conformité d'accessibilité WCAG 2.1 Niveau AA - Automne 2023
- Accessibility assessment #2 - CRA Usability testing
- Évaluation de l'accessibilité #2 - Test d'utilisabilité de l'ARC
-
Footer State: Stable
Documentation and working example on how to use the footer.
All examples and info
- Documentations
- Examples
- Footer
- Pied de page complet
- Main footer band and sub-footer band
- Bande principale et bande sous pied de page
- Contextual band and sub-footer band
- Bande contextuelle et bande sous pied de page
- Hide optional links from the sub-footer band
- Masquer les liens optionnels de la bande sous le pied de page
- Contextual band and sub-footer band with no optional links
- Bande contextuelle et bande sous pied de page sans les liens facultatifs
- Bande principale et bande sous pied de page sans les liens facultatifs
- Masquer la bande contextuelle et les liens optionnels de la bande sous le pied de page du pied de page
- Sub-footer band only
- Bande sous pied de page uniquement
- Sub-footer band only, with no optional links
- Bande sous pied de page uniquement sans les liens facultatifs
- Customize 'Terms and conditions' and 'Privacy' links in footer
- Personnaliser les liens 'Avis' et 'Confidentialité' dans le pied de page
- Contextual band and link variations
- Bande contextuelle et des variations de lien
- Reports
-
GCWeb Menu State: Stable
Documentation on how to use the GCWeb menu.
All examples and info
- Documentations
-
Header State: Stable
Documentation on how to use the header.
-
Helpers State: Stable
Helpers to overwrite compiled styles
-
Language toggle link State: Stable
Documentation on how to use language toogle link.
All examples and info
- Documentations
-
Main title of the page State: Stable
Documentation on how to use the Main title of the page component.
All examples and info
- Documentations
- Examples
- Content page with default main page title
- Page de contenu avec titre principal par défaut
- Stacked main page title
- Titre principal superposé
- Main page title aligned on the right
- Titre principal de la page aligné à droite
- Main page title in a div aligned on the right
- Titre principal dans une div alignée à droite
- Stacked main page title in a div aligned on the right
- Titre principal superposé dans une div alignée à droite
- Stacked main page title aligned on the right
- Titre principal superposé aligné à droite
-
Page details State: Stable
Documentation on how to use the page details section.
All examples and info
- Documentations
- Examples
- Reports
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details - English report
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details - French report
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details (Basic Html version)- English report
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details (Basic Html version)- French report
-
Secondary/Local menu State: Deprecated
Secondary menu component
All examples and info
- Examples
- Task 1
- Tâche 1
- Sub task 1
- Sub tâche 1
- Sub task 2
- Sub tâche 2
- Sub task 3
- Sub tâche 3
- Sub task 4
- Sub tâche 4
- Sub task 5
- Sub tâche 5
- Sub task 6
- Sub tâche 6
- Sub task 7
- Sub tâche 7
- Task 2
- Tâche 2
- Task 3
- Tâche 3
- Sub task 1
- Sub tâche 1
- Sub task 2
- Sub tâche 2
- Sub sub task 1
- Sub sub tâche 1
- Sub sub task 2
- Sub sub tâche 2
- Sub task 3
- Sub tâche 3
- Task 4
- Tâche 4
- Examples
-
Skip links State: Stable
Documentation and working example on how to use the skiplinks.
All examples and info
Common components
-
Ajax Fetch State: Stable
Fetch data using Ajax
All examples and info
-
Alert State: Stable
Alerts with custom styles.
All examples and info
-
Alignment State: Stable
-
Buttons State: Stable
Buttons page including working examples to test how various button styles appear and function
All examples and info
-
Color (Foreground/Background) State: Stable
Colors page including working examples to test how various text appears on different backgrounds.
All examples and info
- Documentations
-
List State: Stable
Example of all the possible styled list variant
All examples and info
-
Main Container State: Stable
Main Container with alternate tags.
All examples and info
-
Scaffolding State: Stable
HTML elements used as is.
All examples and info
- Examples
- Reports
- Accessibility assessment #1 - Input focus
- Évaluation d'accessibilité #1 - Visibilité du focus
- Text level semantics - Full Accessibility assessment
- Texte de niveau sémantique - Évaluation d'accessibilité complète
- Accessibility assessment #2 - Forms
- Assessment d'accessibilité #2 - Formulaires
- Accessibility assessment #3 - Forms
- Assessment d'accessibilité #3 - Formulaires
-
Share widget State: Stable
Facilitates sharing Web content on social media platforms.
All examples and info
-
Spacing State: Stable
Utility classes to add spacing between elements.
All examples and info
- Examples
-
Tables State: Stable
-
Text-level Modifiers State: Stable
Text-level modifiers for styling and formatting
All examples and info
-
Basic HTML State: Stable
Enable Basic HTML Mode
All examples and info
Wet-boew
-
Add to Calendar State: Stable
Save events directly into personal calendar
All examples and info
- Examples
- Documentations
-
Background image State: Stable
Apply a background image from the given URL in parameter or as per the image group (srcset) information.
All examples and info
- Examples
- Documentations
-
Calendar of Events State: Stable
Interface for navigating a chronological list of events
All examples and info
- Examples
- Documentations
-
Charts and Graphs State: Stable
Dynamically generates charts and graphs from table data
All examples and info
- Examples
- Charts and graphs - Simple and easy
- Graphiques - Simple
- Charts and graphs - Customization
- Graphiques - Personalisation
- Charts and graphs - Labels and reference values
- Graphiques - Étiquettage et la valeur de référence
- Charts and graphs - Customizing pie charts
- Graphiques - Personalisation de diagramme circulaire
- Charts and graphs - Specific test cases
- Graphiques - Scénarios d'essai spécifiques
- Documentations
- Examples
-
Collapsible Alerts State: Stable
Alerts which can be collapsed by the user
All examples and info
- Examples
- Documentations
-
Country Content State: Stable
Inserts AJAXed-in content based on a visitor's country
All examples and info
- Examples
- Documentations
-
Data Ajax State: Stable
A basic AjaxLoader wrapper that inserts AJAXed in content
-
Data Fusion Query State: Stable
Map a query parameter value into an input value
All examples and info
- Examples
- Documentations
-
Data Inview State: Stable
Displays an overlay when a section moves out of the viewport
All examples and info
- Examples
- Documentations
-
Data Picture State: Stable
Allow a web page to specify different image sources to display based on media queries
All examples and info
- Examples
- Documentations
-
Details closed State: Provisional
Keep selected details elements closed on defined viewport and down if they were not engaged, default is small
All examples and info
- Examples
- Documentations
-
Dismissable content State: Stable
Make content dismissable by users
All examples and info
- Examples
- Documentations
-
Equal height State: Stable
Equalises the height of elements that are on the same baseline
All examples and info
-
Exit script State: Stable
Redirects users to another site
All examples and info
- Examples
- Documentations
-
Facebook State: Stable
Helps with implementing Facebook embedded pages
-
Favicon State: Stable
This plugin provides the ability to add and update the favicon's on a web page.
All examples and info
- Examples
- Documentations
-
Feeds State: Stable
Aggregates and displays entries from one or more Web feeds.
All examples and info
- Documentations
- Examples
-
Filter State: Stable
Filters through content and only show content that match a certain keyword
-
Footnotes State: Stable
This plugin allows developers to easily embed footnotes into their Web pages, and helps to achieve WCAG 2.0 compliance when providing such footnotes
All examples and info
- Examples
- Documentations
-
Form validation State: Stable
This component provides generic validation and error message handling for Web forms
All examples and info
- Examples
- Documentations
-
Geomap State: Stable
Displays a dynamic map over which information from additional sources can be overlaid.
All examples and info
- Examples
- Documentations
-
Lightbox State: Stable
Display images and other content in a dialog box, either individually or as part of a gallery. Implements the WAI-ARIA Dialog (Modal) design pattern
-
Menu State: Stable
Provides an interactive menu with optional sub-menus. Implements the WAI-ARIA menu design pattern
-
Multimedia State: Stable
Provides an accessible multimedia player for embedding video and audio into web pages
All examples and info
-
Overlay State: Stable
A flexible, responsive overlay plugin. Implements the WAI-ARIA Dialog (Modal) design pattern
All examples and info
- Examples
- Documentations
-
Paginate State: Provisional
Adds pagination at the bottom of a list of items
-
Prettify State: Stable
Syntax highlighting of source code snippets in an html page using google-code-prettify
-
Session Timeout State: Stable
Create a session inactivity timeout that warns users when their session is about to expire
All examples and info
- Examples
- Documentations
-
Share State: Stable
Enables users to quickly share content with their networks
All examples and info
- Examples
- Documentations
-
Steps Form State: Provisional
This component provides the ability to break a form into steps
All examples and info
- Examples
- Documentations
-
Tables State: Stable
Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables
All examples and info
- Examples
- Documentations
-
Tabbed Interface State: Stable
Dynamically stacks multiple sections of content, transforming them into a tabbed interface
All examples and info
-
Tag filter State: Provisional
Filters through content and show/hide content that match certain tags.
All examples and info
- Examples
- Documentations
- Reports
-
Text highlighting State: Stable
Highlights any text within a pre-defined area that matches case-insensitive search criteria
All examples and info
- Examples
- Documentations
-
Toggle State: Stable
Create an element that toggles elements between on and off states.
All examples and info
- Examples
- Documentations
- Reports
-
X (Twitter) State: Stable
Helps with implementing Twitter embedded timelines
-
Data JSON State: Stable
Insert content extracted from a JSON file
All examples and info
- Examples
- Documentations
-
Basic HTML State: Stable
Enable Basic HTML Mode on any given page to simplify the readability of the page by executing the bare minimum DOM manipulations
All examples and info
- Examples
- Documentations
-
JSON Manager State: Stable
Manage dataset and apply JSON Patch
All examples and info
- Examples
- Documentations
-
Postback State: Stable
Submit web form through AJAX call
All examples and info
- Examples
- Documentations
-
Randomize State: Stable
Randomly picks one of the child elements
-
Zebra State: Stable
Zebra striping for tables
All examples and info
- Examples
- Documentations
Other documentation
WET features styled with Canada.ca theme
GCWeb project documentation
- GCWeb theme - Meta information
- Migration instruction - GCWeb theme V5
- Archived - Documentation - GCWeb English
- Archived - Releases English
- Skeleton - Static header/footer - Bootstrap 3
- Prototype skeleton - Static header/footer - Bootstrap 4
Evaluations and reports
Implementing / Developing
Implementing GCWeb on your site
Implementation guide for the Canada.ca theme with the Web Experience Toolkit version 4.x.
Developing for WET / GCWeb
Join the community and start creating, improving and fixing GCWeb, the Canada.ca theme. Learn how to set up your local environment.
Page details
- Date modified: