GCWeb, the WET-BOEW Canada.ca theme

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.

Components

• Checkboxes and radio buttons State: Stable

  Checkboxes and radio buttons designed based on user experience testing

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Checkboxes and radio buttons
    • Cases à cocher et boutons radio
  • Examples
    • Checkboxes and radio buttons
    • Cases à cocher et boutons radio
  • Specification
    • Cases à cocher et boutons radio : Système de conception de Canada.ca
    • Checkboxes and radio buttons: Canada.ca design system

• Download link State: Stable

  Download link with custom styles.

  • Working example
  • Source code

  All examples and info

  • Examples
    • Download link
    • Lien de téléchargement

• Featured link - Documentation and working example State: Provisional

  This adds a featured link to a page that your institution needs to feature prominently.

  • Working example
  • Source code

  All examples and info

  • Examples
    • Featured link - Documentation and working example
    • Lien en vedette - Documentation et example pratique

• Context-specific features State: Stable

  Context-specific features

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Context-specific features - Canada.ca design pattern
    • Promotions contextuelles - Configuration de conception de Canada.ca
  • Examples
    • Context-specific features - Working Examples
    • Promotions contextuelles - Exemples pratiques

• Feeds plugin GC override State: Provisional

  Overrides the WET ATOM feeds to apply GC design pattern.

  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Feeds GC overrides - Documentation and working example.
    • Fils de syndication remplacement GC - Documentation et exemple pratique

• Most requested - Documentation and working example State: Provisional

  Features top tasks related to the page it is on.

  • Working example
  • Source code

  All examples and info

  • Examples
    • Most requested - Documentation and working example
    • En demande

• Services and information State: Stable

  Services and information

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Services and information
    • Services et information (en anglais seulement)
  • Documentations
    • Services and information
    • Services et information (en anglais seulement)

• Subway map menu State: Provisional

  GC Subway map menu

  • Working example
  • Documentation
  • Source code

  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
    • Subway map menu
    • Menu par carte de métro

• GC tables State: Provisional

  Simple responsive gc tables

  • Working example
  • Source code

  All examples and info

  • Examples
    • Tables
    • Tableaux

• Table of Contents State: Stable

  Table of Contents to navigate on same page subsections

  • Working example
  • Source code

  All examples and info

  • Examples
    • In-page table of contents
    • Table des matières

• Well header responsive State: Stable

  Context-specific features

  • Working example
  • Source code

  All examples and info

  • Examples
    • Well header responsive
    • Entête well responsive

• Other components State: Stable

  Components included but need to move in its own folder.

  • Working example
  • Source code

  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

• Labels State: Stable

  Labels including all various states.

  • Working example
  • Source code

  All examples and info

  • Examples
    • Labels
    • Étiquettes

• List - Additional style State: Stable

  Additional style (double spaced)

  • Working example
  • Source code

  All examples and info

  • Examples
    • List - Additional style
    • Liste - Style additionel

• Chat wizard State: Provisional

  Transforms a simple form into a conversation like experience used as a wizard.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Chat wizard
    • Conversation suggestive
    • with JSON setting
    • avec une configuration JSON
  • Documentations
    • Chat wizard
    • Chat wizard (en anglais seulement)
  • Related documents
    • 2019-15 Research documenation
    • 2019-15 Research documenation (en anglais seulement)

• Data JSON State: Stable

  Insert content extracted from a JSON file.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Data JSON
    • Data JSON
    • Template HTML 5
    • Gabarit HTML 5
  • Documentations
    • Data JSON
    • Data JSON

• Do action State: Stable

  Execute action, like filter a table, based on pre-established set of configuration.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Table
    • Filtrer un tableau
    • JSON
    • JSON
    • JSON manager patches
    • Gestionnaire JSON avec l'exécuteur d'action de patches
  • Documentations
    • Do action
    • Exécuter des actions

• Fieldflow State: Stable

  Provide an alternative user interface when a page contains a really long list

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Fieldflow
    • Déroulement de champs
    • Basic
    • Configurations de base
    • Advanced
    • Avancé
    • Alternatives
    • Aternatives
  • Documentations
    • Fieldflow
    • Déroulement de champs

• JSON Manager State: Stable

  Manage dataset and apply JSON Patch

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • JSON Manager
    • Gestionnaire JSON
    • with Do Action patches
    • avec l'exécuteur d'action de patches
  • Documentations
    • JSON Manager
    • Gestionnaire JSON

• Datalist dynamic suggestion State: Stable

  Load datalist suggestion from a JSON file

  • Working example
  • Source code

  All examples and info

  • Examples
    • Datalist dynamic suggestion
    • Datalist dynamic suggestion (en anglais seulement)

• URL Mapping State: Stable

  Execute pre-configured ajax action based on url query string.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Ajax
    • Ajax
    • Table filtering
    • Filtrer un tableau
    • Patching JSON
    • Appliquer des correctifs JSON
    • Geomap
    • Filtrage d'une géomap
  • Documentations
    • URL mapping
    • Correspondance d'URL

• wb5-click postback converter State: Deprecated

  Convert deprecated wb5-click postback form syntax to wb-postback plugin

  • Working example
  • Source code

  All examples and info

  • Examples
    • wb5-click postback converter
    • conversion du wb5-click postback

• Well bold State: Stable

  This apply font weight bold to evey text element inside a well component and generates normal font weight when the element strong is applied.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Well bold - working example
    • Boîte grise en gras - example pratique
  • Documentations
    • Well bold
    • Boîte grise en gras

Templates

• Advanced Service - Probably deprecated State: Stable

  Probably deprecated - template for advanced service

  • Working example

  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]

• Campaign name State: Stable

  Campaign name templates samples

  • Working example
  • Documentation

  All examples and info

  • Examples
    • Campaign name
    • Nom de la campagne
    • Campaign name 2
    • Nom de la campagne 2
  • Documentations
    • API documentations

• Home State: Stable

  Home templates

  • Working example
  • Documentation

  All examples and info

  • Examples
    • Home - Canada.ca
    • Accueil - Canada.ca
  • Documentations
    • API documentations
    • Documentation API

• Other template State: Stable

  Template included but need to move in its own folder.

  • Working example

  All examples and info

  • Examples
    • Content page
    • Page de contenu
    • Fluid content page
    • Page de contenu fluide
    • Content page - Limited width content
    • Page de contenu - Largeur de contenu limitée
    • Content page - GCWeb 4.0.29 font stylee
    • Page de contenu - Police de caractère de GCWeb 4.0.29
    • 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

• Index State: Stable

  Index templates

  • Working example
  • Documentation

  All examples and info

  • Examples
    • [Long index page]
    • [Page d’index long]
  • Documentations
    • API documentations

• Institutional profile State: Stable

  Institutional profile templates

  • Working example

  All examples and info

  • Examples
    • [Institution Name]
    • [Nom de l’institution]
    • [Institution Name] - landing page (provisional)
    • [Nom de l’institution] - Pages d'accueil (provisoire)
    • 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
    • GCWU theme - English institution template
    • Thème FEGC - Français - Gabarit de profil institutionnel

• Laws and regulations pages State: Stable

  The laws and regulations collection provides access to Government of Canada acts and regulations through their individual profiles.

  • Working example

  All examples and info

  • Examples
    • [Act name] ([NN-XX])
    • [Titre de la loi] ([NN-XX])
    • [Regulation name] ([NN-XX])
    • [Nom du règlement] ([NN-XX])
  • Specification
    • Pages des lois et des règlements - Modèle de Canada.ca
    • Laws and regulations pages - Canada.ca template

• Local navigation State: Stable

  Template sample with a local navigation

  • Working example

  All examples and info

  • Examples
    • [Topic - Local navigation]
    • [Sujet - Navigation locale]
    • Task 1
    • Tache 1
    • Sub task 1
    • Sub Tache 1
    • Sub task 2
    • Sub Tache 2
    • Sub task 3
    • Sub Tache 3
    • Sub task 4
    • Sub Tache 4
    • Sub task 5
    • Sub Tache 5
    • Sub task 6
    • Sub Tache 6
    • Sub task 7
    • Sub Tache 7
    • Task 2
    • Tache 2
    • Task 3
    • Tache 2
    • Sub task 1
    • Sub Tache 1
    • Sub task 2
    • Sub Tache 2
    • Sub sub task 1
    • Sub sub Tache 1
    • Sub sub task 2
    • Sub sub Tache 2
    • Sub task 3
    • Sub Tache 3
    • Task 4
    • Tache 4

• Ministerial profile State: Stable

  Ministerial profile templates documentation and example

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Ministerial profile page
    • Page de Profile ministriel
  • Examples
    • Ministerial profile
    • Profile ministriel
    • Ministerial profile - swearing-in day
    • Profile ministriel - jour d'assermentation
    • Parliamentary secretaries profile - swearing-in day
    • Profile des secrétaires parlementaires - jour d'assermentation

• News State: Stable

  News templates samples

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • News page
    • Page de nouvelles
  • Examples
    • News
    • Page de contenu

• Organizational profile State: Stable

  Organizational profile templates

  • Working example

  All examples and info

  • Examples
    • [Organization Name]
    • [Nom de l’organisme]
    • arm’s length - [Organization Name]
    • organisme indépendamment - [Nom de l’organisme]

• Search results State: Stable

  Search templates

  • Working example
  • Documentation

  All examples and info

  • Examples
    • Search results
    • Résultats de la recherche
    • Search facets/filters results
    • avec filtre
    • Contextual
    • Contextuel
  • Documentations
    • API documentations
  • Implementation reference
    • Pagination for search templates

• Server error message State: Stable

  Error server page

  • Working example

  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

• Splash page - Canada.ca State: Stable

  Splash page example

  • Working example
  • Documentation

  All examples and info

  • Examples
    • Splash page example
    • Exemple d'écran d'accueil
  • Documentations
    • Splash page
    • Écran d'accueil

• Thematic State: Provisional

  Site variant where a thematic is applied

  • Working example

  All examples and info

  • Examples
    • Pink Day
    • Journée rose
    • Pink Day - Home
    • Journée rose - Accueil
    • Dark theme
    • Thème sombre
    • Dark theme - Home
    • Thème sombre - Accueil

• Beta - Theme, Topic State: Provisional

  Theme, Topic beta templates

  • Working example

  All examples and info

  • Examples
    • [Theme - Topic title]
    • [Titre du thème ou du sujet]

• Topic State: Stable

  Topic template examples

  • Working example

  All examples and info

  • Examples
    • [Topic title]
    • [Titre du sujet]
    • [Topic title, test case 1]
    • [Titre du sujet, cas d'essaie 1]

Sites and global functionality

• Core components for the Canada.ca theme
• Common components

Core components for the Canada.ca theme

• Archived - template State: Stable

  Gobal demoed feature included but need to move in its own folder.

  • Working example

  All examples and info

  • Examples
    • Archived - Content page
    • Archivé - Page de contenu

• Authentication State: Stable

  Documentation and working example on how to use the contextual sign in button.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Authentication patterns
    • Modèles d'authentification
  • 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

  Documentation on how to use breadcrumbs.

  • Documentation

  All examples and info

  • Documentations
    • Breadcrumb trail
    • Fil d'Ariane

• Feedback area State: Stable

  Documentation on how to use the elements of the feedback area.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Documentation for the feedback area
    • Documentation pour la zone de rétroaction
  • Examples
    • Page feedback tool
    • Outil de rétroaction sur la page
    • Page feedback tool with contact link
    • Outil de rétroaction sur la page avec lien de contact
    • Report a problem
    • Signaler un problème

• Footer State: Stable

  Documentation and working example on how to use the footer.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Footer
    • Pied de page complet
  • 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
  • Unknown group
    • Accessibility assessment #1 - Footer
    • Évaluation de l'accessibilité #1 - Pied de page

• GCWeb Menu State: Stable

  Documentation on how to use the GCWeb menu.

  • Documentation

  All examples and info

  • Documentations
    • GCWeb Menu
    • Menu GCWeb

• Header State: Stable

  Documentation on how to use the header.

  • Documentation

  All examples and info

  • Documentations
    • Header
    • Entête

• Helpers State: Stable

  Helpers to overwrite compiled styles

  • Documentation

  All examples and info

  • Documentations
    • Colour
    • Couleur

• Language toggle link State: Stable

  Documentation on how to use language toogle link.

  • Documentation

  All examples and info

  • Documentations
    • Language toggle link
    • Lien pour changer de langue

• Page details State: Stable

  Documentation on how to use the page details section.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Documentation for Page details
    • Documentation pour Détails de la page
  • Examples
    • Default page details
    • Détails de la page par default
    • Page details without 'Report a problem' and 'Share this page' buttons
    • Détails de la page sans les boutons 'Signaler un problème' et 'Partager cette page'
    • Page details without 'Report a problem' button
    • Détails de la page sans le bouton 'Signaler un problème'
    • Page details without 'Share this page' button
    • Détails de la page sans le bouton 'Partager cette page'
    • Page details v.1.0 (deprecated)
    • Détails de la page version 1.0 (obsolète)

• Skip links State: Stable

  Documentation and working example on how to use the skiplinks.

  • Documentation

  All examples and info

  • Documentations
    • Skip links
    • Liens de saut de page

Common components

• Alert State: Stable

  Alerts with custom styles.

  • Working example

  All examples and info

  • Examples
    • Alerts
    • Alertes

• Color (Foreground/Background) State: Stable

  Colors page including working examples to test how various text appears on different backgrounds.

  • Documentation

  All examples and info

  • Documentations
    • Color (Foreground/Background)
    • Couleur (Premier plan/Arrière-plan)

• List State: Stable

  Example of all the possible styled list variant

  • Working example

  All examples and info

  • Examples
    • Lists
    • Listes
    • List group
    • Liste groupé

• Scaffolding State: Stable

  HTML elements used as is.

  • Working example

  All examples and info

  • Examples
    • Forms
    • Formulaires

• Tables State: Stable

  Tables with custom styles

  • Working example

  All examples and info

  • Examples
    • Tables
    • Tables

Other documentation

WET features styled with Canada.ca theme

view list of demos

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

• 1 - Accessibility assessment as 2018-11-14
• 2 - Regression user acceptance testing as 2018-11-16