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.

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.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Bold content - working example
    • Contenu en gras - example pratique
  • Documentations
    • Bold content
    • Contenu en gras

• 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.

  • 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

• Contributors State: Stable

  Links to institutions or organizations that support the content on the page.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Contributors
    • Collaborateurs
  • Examples
    • Contributors
    • Collaborateurs

• 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 State: Stable

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

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Featured link
    • Lien en vedette
  • Examples
    • Featured link
    • Lien en vedette
  • Reports
    • Accessibility pre-assessment #1
    • Pré-évaluation de l'accessibilité #1
    • Accessibility assessment #1
    • Évaluation de l'accessibilité #1

• Context-specific features State: Stable

  In-page components used to promote government activities, initiatives, programs and services.

  • 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
  • Reports
    • Accessibility assessment #1 - Context-specific features
    • Assessment d'accessibilité #1 - Promotions contextuelles

• Social media channels State: Stable

  The social media channels pattern provides links to official Government of Canada (GC) social media accounts.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Social media channels - Documentation
    • Bloc des réseaux de médias sociaux - Documentation
  • Examples
    • Social media channels
    • Bloc des réseaux de médias sociaux

• Minister or institutional head State: Stable

  This component is for the minister or institutional head pattern on the institutional landing page.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Minister or institutional head
    • Ministre ou chef d’institution
    • Minister or institutional head - two ministers example
    • Ministre ou chef d'institution - exemple avec deux ministres
    • Minister or institutional head - special cases example
    • Ministre ou chef d'institution - cas particuliers
  • Documentations
    • Minister or institutional head
    • Ministre ou chef d’institution

• Most requested State: Stable

  Features top tasks related to the page it is on.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Most requested - Documentation
    • En demande - Documentation
  • Examples
    • Most requested
    • En demande
    • Most requested - bad implementation
    • En demande - mauvaise implémentation

• Services and information State: Stable

  Used to present sets of links with accompanying descriptions.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Services and information
    • Services et renseignements
  • Reports
    • Accessibility assessment #1 - services and information
    • Assessment d'accessibilité #1 - Services et information
  • Documentations
    • Services and information
    • Services et renseignements

• Step by Step navigation State: Stable

  Step by Step navigation designed based on user experience testing

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Step by Step navigation
    • Navigation étape par étape
  • Examples
    • Step by Step navigation
    • Navigation étape par étape
  • Specification
    • Navigation étape par étape : Système de conception de Canada.ca
    • Step by Step navigation: Canada.ca design system

• 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.

  • 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

  A simple CSS solution to turn tables into responsive cards for smaller windows.

  • Working example
  • Source code

  All examples and info

  • Examples
    • Tables
    • Tableaux
  • Reports
    • Accessibility assessment #6 - GC tables
    • Assessment d'accessibilité #6 - Tableaux GC
    • Accessibility assessment #7 - GC tables
    • Assessment d'accessibilité #7 - Tableaux GC

• 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

  Support use case for promotional page header or panel section header the width of the well header is readjusted based on the view port.

  • Working example
  • Source code

  All examples and info

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

• Images State: Stable

  Apply WET-BOEW simple styles or modify an image without use of editing software.

  • Working example
  • Source code

  All examples and info

  • Examples
    • Images
    • Images

• 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
  • Reports
    • Accessibility assessment #8 - Labels
    • Assessment d'accessibilité #8 - Étiquettes
    • Accessibility assessment #9 - Labels
    • Assessment d'accessibilité #9 - É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)

• 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

• 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
    • Select input
    • Sélectionner un champ de saisie
    • 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

---

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]

• Application State: Stable

  Application templates samples.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Application template documentation
    • Documentation du gabarit de page d'application
  • Examples
    • Default application page
    • Page d'application par défaut
    • Application page with informational banner
    • Page d'application avec bannière informative

• 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

• Content page State: Stable

  Blank content pages with text sample.

  • 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

• Home State: Stable

  Home templates

  • Working example
  • Documentation

  All examples and info

  • Examples
    • Home - Canada.ca
    • Accueil - Canada.ca
  • Documentations
    • API documentations
    • Documentation API
  • Reports
    • Pre-accessibility assessment #1
    • Évaluation de pré-accessibilité #1

• Other template State: Stable

  Template included but need to move in its own folder.

  • Working example

  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

• Index State: Stable

  Index templates

  • Working example
  • Documentation

  All examples and info

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

• Institutional landing page State: Stable

  Institutional landing page template documentation and working example.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Institutional landing page
    • Page d'accueil institutionnelle
  • Examples
    • Institutional landing page
    • Page d'accueil institutionnelle
  • Reports
    • Accessibility assessment #1 - Institutional template
    • Évaluation d'accessibilité #1 - Modèle institutionnel
    • Accessibility assessment #2 - Institutional template
    • Évaluation d'accessibilité #2 - Modèle institutionnel

• Institutional profile State: Stable

  Institutional profile templates

  • Working example

  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
    • 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

• 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

• Topic State: Stable

  Topic template examples

  • Working example
  • Documentation

  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 - Demoted
    • Page de sujet/thème - Rétrogradée
    • Lowest topic (with secondary navigation) - Deprecated
    • Sujet de plus bas niveau (avec une navigation secondaire) - Dépréciée
  • Documentations
    • Topic page template
    • Gabarit de page de sujet

---

Design patterns

• About the institution pattern

  Section on an institutional landing page that provides links to corporate, program and policy information

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • About the institution
    • À propos de l'institution
  • Examples
    • About the institution
    • À propos de l'institution

• Introduction block

  Guidance about using the introduction block component on Canada.ca.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Introduction block
    • Bloc d’introduction
  • Examples
    • Introduction block
    • Bloc d’introduction
    • Introduction block with full-width image
    • Bloc d’introduction avec image pleine largeur
    • Introduction block with half-width image
    • Bloc d’introduction avec image demi-largeur

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
  • Documentation

  All examples and info

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

• 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

  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.

  • Documentation

  All examples and info

  • Documentations
    • Breadcrumb trail
    • Fil d'Ariane

• Date modified State: Stable

  Indicates the date on which the current page was last modified.

  • Documentation

  All examples and info

  • Documentations
    • Date modified
    • Date de modification

• 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
  • 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

• 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
  • Reports
    • 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
  • Reports
    • Accessibility assessment #7 - GC header brand logo
    • Assessment d'accessibilité #7 - Logo de la marque d'en-tête GC
    • Accessibility assessment #8 - GC header brand logo
    • Assessment d'accessibilité #8 - Logo de la marque d'en-tête GC

• 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

• Main title of the page State: Stable

  Documentation on how to use the Main title of the page component.

  • Working example
  • Documentation

  All examples and info

  • Documentations
    • Main page title documentation
    • Documentation du titre principal
  • Examples
    • Content page with default main page title
    • Page de contenu avec titre principal par défaut
    • Stacked main page title
    • Titre principal superposé

• 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 défaut
    • Page details with Page feedback tool
    • Détails de la page avec Outil de rétroaction sur la page
  • 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

  • Working example

  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

• Skip links State: Stable

  Documentation and working example on how to use the skiplinks.

  • Working example

  All examples and info

  • Examples
    • Skip links
    • Liens de saut de page
  • Reports
    • Accessibility assessment #1 - Skip links
    • Évaluation d'accessibilité #1 - Liens de saut de page

Common components

• Ajax Fetch State: Stable

  Fetch data using Ajax

  • Working example

  All examples and info

  • Examples
    • Ajax Fetch
    • Récupération de ressource via Ajax
  • Reports
    • Pre Accessibility assessment #1 - AJAX Fetch
    • Assessment d'accessibilité préliminaire #1 - Récupération de ressource via Ajax

• Alert State: Stable

  Alerts with custom styles.

  • Working example

  All examples and info

  • Examples
    • Alerts
    • Alertes
  • Reports
    • Accessibility assessment #1 - Alert
    • Évaluation de l'accessibilité #1 - Alert

• Alignment State: Stable

  Alignment with custom styles.

  • Working example

  All examples and info

  • Examples
    • Alignment
    • Alignement

• Buttons State: Stable

  Buttons page including working examples to test how various button styles appear and function

  • Working example

  All examples and info

  • Examples
    • Buttons
    • Boutons
  • Reports
    • Accessibility assessment #3 - Buttons
    • Assessment d'accessibilité #3 - Boutons
    • Accessibility assessment #4 - Buttons
    • Assessment d'accessibilité #4 - Boutons

• 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é
    • Custom list styling using parent div element
    • Style de liste personnalisé à l'aide de l'élément div parent

• Main Container State: Stable

  Main Container with alternate tags.

  • Working example

  All examples and info

  • Examples
    • Main Container
    • Conteneur Principal
    • Main Container with article
    • Conteneur Principal avec article
    • Main Container with section
    • Conteneur Principal avec section
  • Reports
    • Pre Accessibility assessment #1 - Main Container
    • Pre Assessment d'accessibilité #1 - Conteneur Principal

• Scaffolding State: Stable

  HTML elements used as is.

  • Working example

  All examples and info

  • Examples
    • Forms
    • Formulaires
    • Text level semantics
    • Sémantique au niveau du texte
  • 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.

  • Working example
  • Documentation

  All examples and info

  • Examples
    • Share widget
    • Gadget de partage
  • Documentations
    • Share widget
    • Gadget de partage
  • Reports
    • Accessibility assessment #1 - Share widget
    • Assessment d'accessibilité #1 - Gadget de partage

• Tables State: Stable

  Tables with custom styles

  • Working example

  All examples and info

  • Examples
    • Tables
    • Tables

• Basic HTML State: Stable

  Enable Basic HTML Mode

  • Working example

  All examples and info

  • Examples
    • Basic HTML
    • HTML simplifié
  • Reports
    • Pre-accessibility assessment #1 - Basic HTML Mode
    • Assessment d'accessibilité préliminaire #1 - HTML simplifié

Wet-boew

• Add to Calendar State: Stable

  Save events directly into personal calendar

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Add to Calendar
    • Ajout au calendrier
  • Documentations
    • Add to Calendar
    • Ajouter au calendrier

• Background image State: Stable

  Apply a background image from the given URL in parameter or as per the image group (srcset) information.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Background image
    • Image d'arrière plan
  • Documentations
    • Background image
    • Image d'arrière plan

• Calendar of Events State: Stable

  Interface for navigating a chronological list of events

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Calendar of Events
    • Calendrier d'événements
  • Documentations
    • Calendar of Events
    • Calendrier d'événements

• Charts and Graphs State: Stable

  Dynamically generates charts and graphs from table data

  • Working example
  • Documentation
  • Source code

  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
    • Charts and graphs - Simple and easy
    • Graphiques - Simple

• Collapsible Alerts State: Stable

  Alerts which can be collapsed by the user

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Collapsible alerts
    • Alertes repliables
  • Documentations
    • Collapsible alerts
    • Alertes repliables

• Country Content State: Stable

  Inserts AJAXed-in content based on a visitor's country

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Country Content
    • Contenu par pays
  • Documentations
    • Country Content
    • Contenu par pays

• Data Ajax State: Stable

  A basic AjaxLoader wrapper that inserts AJAXed in content

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Data Ajax
    • Data Ajax
  • Documentations
    • Data Ajax
    • Data Ajax

• Data Fusion Query State: Stable

  Map a query parameter value into an input value

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Data Fusion Query
    • Donnée de requête fusionné
  • Documentations
    • Data Fusion Query
    • Donnée de requête fusionné

• Data Inview State: Stable

  Displays an overlay when a section moves out of the viewport

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Data Inview
    • Data Inview
  • Documentations
    • Data Inview
    • Data Inview

• Data Picture State: Stable

  Allow a web page to specify different image sources to display based on media queries

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Data Picture
    • Data Picture
  • Documentations
    • Data Picture
    • Data Picture

• Details closed State: Provisional

  Keep selected details elements closed on defined viewport and down if they were not engaged, default is small

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Details closed
    • Details fermé
  • Documentations
    • Details closed
    • Details fermé

• Dismissable content State: Stable

  Make content dismissable by users

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Dismissable content
    • Contenu écartable
  • Documentations
    • Dismissable content
    • Contenu écartable

• Equal height State: Stable

  Equalises the height of elements that are on the same baseline

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Equal height (pure CSS)
    • Égalisation des hauteurs (pure CSS)
    • Equal height
    • Égalisation des hauteurs
  • Documentations
    • Equal height
    • Égalisation des hauteurs
  • Other
    • Equal height (pure CSS)
    • Égalisation des hauteurs (pure CSS)

• Exit script State: Stable

  Redirects users to another site

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Exit script
    • Sortie de navigation avisé
  • Documentations
    • Exit script
    • Sortie de navigation avisé

• Facebook State: Stable

  Helps with implementing Facebook embedded pages

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Facebook
    • Facebook
  • Documentations
    • Facebook
    • Facebook

• Favicon State: Stable

  This plugin provides the ability to add and update the favicon's on a web page.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Favicon
    • Favoricône
  • Documentations
    • Favicon
    • Favoricône

• Feeds State: Stable

  Aggregates and displays entries from one or more Web feeds.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Feeds
    • Fils de syndication
  • Examples
    • Feeds
    • Fils de syndication

• Filter State: Stable

  Filters through content and only show content that match a certain keyword

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Filter
    • Filtre
  • Documentations
    • Filter
    • Filtre

• 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

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Footnotes
    • Notes de bas de page
  • Documentations
    • Footnotes
    • Notes de bas de page

• Form validation State: Stable

  This component provides generic validation and error message handling for Web forms

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Form validation
    • Validation de formulaires
  • Documentations
    • Form validation
    • Validation de formulaires

• Geomap State: Stable

  Displays a dynamic map over which information from additional sources can be overlaid.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Geomap
    • Géocarte
    • Geomap v4.0.30
    • Géocarte v4.0.30
  • Documentations
    • Geomap
    • Géocarte

• 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

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Lightbox
    • Lightbox
  • Documentations
    • Lightbox
    • Lightbox

• Menu State: Stable

  Provides an interactive menu with optional sub-menus. Implements the WAI-ARIA menu design pattern

  • Documentation
  • Source code

  All examples and info

  • Documentations
    • Menu
    • Menu

• Multimedia State: Stable

  Provides an accessible multimedia player for embedding video and audio into web pages

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Multimedia Player - Video
    • Lecteur multimédia - Vidéo
    • Multimedia Player - Audio-only
    • Lecteur multimédia - Audio seulement
    • Multimedia Player - Youtube
    • Lecteur multimédia - Youtube
  • Documentations
    • Multimedia Player
    • Lecteur multimédia

• Overlay State: Stable

  A flexible, responsive overlay plugin. Implements the WAI-ARIA Dialog (Modal) design pattern

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Overlay
    • Contenu superposé
  • Documentations
    • Overlay
    • Contenu superposé

• Paginate State: Provisional

  Adds pagination at the bottom of a list of items

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Paginate
    • Paginer
  • Documentations
    • Paginate
    • Paginer

• Prettify State: Stable

  Syntax highlighting of source code snippets in an html page using google-code-prettify

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Prettify
    • Prettify
  • Documentations
    • Prettify
    • Prettify

• Session Timeout State: Stable

  Create a session inactivity timeout that warns users when their session is about to expire

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Session Timeout
    • Expiration de la session
  • Documentations
    • Session Timeout
    • Expiration de la session

• Share State: Stable

  Enables users to quickly share content with their networks

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Share widget
    • Gadget de partage
  • Documentations
    • Share widget
    • Gadget de partage

• Steps Form State: Provisional

  This component provides the ability to break a form into steps

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Steps Form
    • Formulaire à étapes
  • Documentations
    • Steps Form
    • Formulaire à étapes

• Tables State: Stable

  Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Tables
    • Tables
    • Table Filters
    • Table Filters
  • Documentations
    • Tables
    • Tables

• Tabbed Interface State: Stable

  Dynamically stacks multiple sections of content, transforming them into a tabbed interface

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Tabbed Interface
    • Interface à onglets
    • Tabbed Interface - Carousel
    • Interface à onglets - Carrousel
  • Documentations
    • Tabbed Interface
    • Interface à onglets

• Tag filter State: Provisional

  Filters through content and show/hide content that match certain tags.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Tag filter
    • Filtre de balise
  • Documentations
    • Tag filter
    • Filtre de balise
  • Reports
    • Accessibility assessment #1 - Tag filter
    • Assessment d'accessibilité #1 - Filtre de balise

• Text highlighting State: Stable

  Highlights any text within a pre-defined area that matches case-insensitive search criteria

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Text highlighting
    • Mise en surbrillance de texte
  • Documentations
    • Text highlighting
    • Mise en surbrillance de texte

• Toggle State: Stable

  Create an element that toggles elements between on and off states.

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Toggle
    • Basculer
  • Documentations
    • Toggle
    • Basculer
  • Reports
    • Accessibility assessment #1 - toggle
    • Assessment d'accessibilité #1 - Basculer

• X (Twitter) State: Stable

  Helps with implementing Twitter embedded timelines

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Twitter
    • Twitter
  • Documentations
    • Twitter
    • Twitter

• 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

• 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

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Basic HTML
    • HTML simplifié
  • Documentations
    • Basic HTML
    • HTML simplifié

• 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

• Postback State: Stable

  Submit web form through AJAX call

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Postback
    • Envoie de formulaire via Ajax
  • Documentations
    • Postback
    • Envoie de formulaire via Ajax

• Randomize State: Stable

  Randomly picks one of the child elements

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Randomize
    • Aléatoire
  • Documentations
    • Randomize
    • Aléatoire

• Zebra State: Stable

  Zebra striping for tables

  • Working example
  • Documentation
  • Source code

  All examples and info

  • Examples
    • Zebra striping
    • Rayage du zèbre
  • Documentations
    • Zebra striping
    • Rayage du zèbre

---

Other documentation

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