GCWeb, the WET-BOEW Canada.ca theme

Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.

View source code

Examples

• Badges

This component applies font weight bold to every text element inside it and generates normal font weight when the <strong> element is applied.

View source code

Examples

• Bold content - working example

Documentation

• Bold content

The institutional byline provides people with a link to the institution or institutions responsible for the content.

View source code

Documentation

• Institutional byline

Conjunctions for stacked or side by side decision points, and/or

View source code

Examples

• Conjunctions (and/or) - working example

Documentation

• Conjunctions (and/or) documentation

Reports

• Accessibility assessment #1

Display check boxes and radio buttons that are bigger than natively provided by browsers and in-line with the Canada.ca design system.

View source code

Documentation

• Checkboxes and radio buttons

Examples

• Checkboxes and radio buttons

Specification

• Checkboxes and radio buttons: Canada.ca design system

Download link with custom styles.

View source code

Documentation

• Download link

Examples

• Download link - Working examples

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

View source code

Documentation

• Featured link

Examples

• Featured link

Reports

• Accessibility pre-assessment #1
• Accessibility assessment #1

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

View source code

Documentation

• Context-specific features - Canada.ca design pattern

Examples

• Context-specific features - Working Examples

Reports

• Accessibility assessment #1 - Context-specific features

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

View source code

Documentation

• Social media channels - Documentation

Examples

• Social media channels

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

View source code

Examples

• Minister or institutional head
• Minister or institutional head - two ministers example
• Minister or institutional head - special cases example
• Minister or institutional head (multiple)

Documentation

• Minister or institutional head

Features top tasks related to the page it is on.

View source code

Documentation

• Most requested - Documentation

Examples

• Most requested
• Most requested - Two items
• Most requested - bad implementation

Used to present sets of links with accompanying descriptions.

View source code

Examples

• Services and information
• Services and information with FieldFlow - Working examples

Reports

• Accessibility assessment #1 - services and information

Documentation

• Services and information

Step by Step navigation designed based on user experience testing

View source code

Documentation

• Step by Step navigation

Examples

• Step by Step navigation

Specification

• Step by Step navigation: Canada.ca design system

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.

View source code

Examples

• Index page
• Section page
• Sub-section page (default)
• Sub-section page (no line)
• Section page with custom subtitle
• Section page with related information
• Section page with bad AEM implementation

Documentation

• Subway map menu

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

View source code

Examples

• Tables

Reports

• Accessibility assessment #6 - GC tables
• Accessibility assessment #7 - GC tables

Table of Contents to navigate on same page subsections

View source code

Examples

• In-page table of contents

Co-existence pilot of the GCDSs card in GCWeb.

View source code

Examples

• GCDS card

Documentation

• GCDS card

Tests pages

• GCDS Card with images
• GCDS Card as implemented in MWS
• GCDS Card like as implemented in MWS (without workaround)

Monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.

View source code

Examples

• Glyphicons

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

View source code

Examples

• Well header responsive

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

View source code

Examples

• Images

Components included but need to move in its own folder.

View source code

Examples

• Provisional functionality
• Redacted text
• Deprecated markup - Report a problem (v4.0.28), gc-nttvs, gc-prtts
• Float column in a data table
• Video example

Labels including all various states.

View source code

Examples

• Labels

Reports

• Accessibility assessment #8 - Labels
• Accessibility assessment #9 - Labels

Style ordered list and divs with steps number in circles.

View source code

Examples

• List steps - working example

Documentation

• List steps - Documentation

Reports

• Accessibility assessment #1

Additional style (double spaced)

View source code

Examples

• List - Additional style

Use to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer.

View source code

Examples

• Panels

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

View source code

Examples

• Chat wizard
• with JSON setting

Documentation

• Chat wizard

Related documents

• 2019-15 Research documentation

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

View source code

Examples

• Table
• JSON
• JSON manager patches

Documentation

• Do action

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

View source code

Examples

• Fieldflow
• Basic
• Advanced
• Alternatives

Documentation

• Fieldflow

Load datalist suggestion from a JSON file

View source code

Examples

• Datalist dynamic suggestion

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

View source code

Examples

• Ajax
• Table filtering
• Patching JSON
• Select input
• Geomap

Documentation

• URL mapping

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

View source code

Examples

• wb5-click postback converter

Probably deprecated - template for advanced service

View source code

Examples

• [Service name] - 1. [Step / section page name]
• [Service name] - 2. [Step / section page name]
• [Service name] - 3. [Step / section page name]
• [Service name] - 4. [Step / section page name]
• [Service name] - 5. [Step / section page name]
• [Service name] - 6. [Step / section page name]

All services page template.

View source code

Examples

• All services

Documentation

• All services

Application templates samples.

View source code

Documentation

• Application template documentation

Examples

• Default application page
• Application page with informational banner

Campaign name templates samples

View source code

Examples

• Campaign name
• Campaign name 2

Documentation

• API documentations

Blank content pages with text sample.

View source code

Examples

• Content page
• Fluid content page
• Content page - Limited width content
• Content page - GCWeb 4.0.29 font stylee

Home templates

View source code

Examples

• Home - Canada.ca

Documentation

• API documentations

Reports

• Pre-accessibility assessment #1

Template included but need to move in its own folder.

View source code

Examples

• Stay connected
• [Theme title]
• Departments and agencies
• Promotional events page (Campaign?)
• Feedback form
• [Audience name]
• Service initiation - Might deprecated

Index templates

View source code

Examples

• [Long index page]

Documentation

• API documentations

Institutional landing page template documentation and working example.

View source code

Documentation

• Institutional landing page

Examples

• Institutional landing page
• Institutional landing page - multiple with pictures

Reports

• Accessibility assessment #1 - Institutional template
• Accessibility assessment #2 - Institutional template

Institutional profile templates

View source code

Examples

• Contact [Institution name]
• [Institution] service performance reporting for fiscal year 2015 to 2016
• arm’s length - [Institution Name]

Related documents

• GCWU theme - English institution template

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

View source code

Examples

• [Act name] ([NN-XX])
• [Regulation name] ([NN-XX])

Specification

• Laws and regulations pages - Canada.ca template

Ministerial profile templates documentation and example

View source code

Documentation

• Ministerial profile page

Examples

• Ministerial profile
• Ministerial profile - swearing-in day
• Parliamentary secretaries profile - swearing-in day

News templates samples

View source code

Documentation

• News page

Examples

• News

Organizational profile templates

View source code

Examples

• [Organization Name]
• arm’s length - [Organization Name]

Search templates

View source code

Examples

• Search results
• Search facets/filters results
• Contextual

Documentation

• API documentations

Implementation reference

• Pagination for search templates

Error server page

View source code

Examples

• We couldn't find that Web page (Error 404) - Canada.ca theme
• 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
• Message title - Canada.ca theme
• Message title - Canada.ca theme / Titre du message - Thème Canada.ca

Splash page example

View source code

Examples

• Splash page example

Documentation

• Splash page

Site variant where a thematic is applied

View source code

Documentation

• Pink Day - Deprecated as of GCWeb v16.0.0

Examples

• Pink Day - Deprecated as of GCWeb v16.0.0
• Pink Day - Home - Deprecated as of GCWeb v16.0.0
• Dark theme
• Dark theme - Home

Theme page template

View source code

Examples

• [Theme]

Documentation

• Theme page

Reports

• Accessibility assessment #1 - GC theme template

Topic template examples

View source code

Examples

• [Topic title]
• [Topic title with stacked header]
• Theme/Topic page - Deprecated as of GCWeb v16.0.0
• Lowest topic (with secondary navigation) - Deprecated as of GCWeb v16.0.0

Documentation

• Topic page template

Reports

• Accessibility assessment #1 - GC topic template

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

View source code

Documentation

• About the institution

Examples

• About the institution

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

View source code

Documentation

• Introduction block

Examples

• Introduction block
• Introduction block with full-width image
• Introduction block with half-width image

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

View source code

Examples

• Archived - Content page

Documentation

• Archived - documentation

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

View source code

Documentation

• Authentication patterns

Examples

• Contextual Sign in button
• Contextual Sign in button with extended custom label
• Contextual Sign in button without custom labels
• Contextual Sign in button without the GCWeb Menu
• Content page - Signed-Off pattern
• Content page - Signed-On pattern
• Active user session

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.

View source code

Documentation

• Breadcrumb trail

Use the contributors pattern to highlight institutions/organizations that have contributed to the content on a webpage.

View source code

Documentation

• Contributors

Examples

• Contributors

Reports

• Accessibility assessment #1

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

View source code

Documentation

• Date modified

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

View source code

Documentation

• Documentation for the feedback area

Examples

• GC feedback
• GC feedback with contact link
• Report a problem

Reports

• Accessibility assessment #1
• Accessibility Conformance Report - WCAG Level AA
• Accessibility assessment #2 - CRA Usability testing
• Accessibility assessment #3 - Page feedback tool

Documentation and working example on how to use the footer.

View source code

Documentation

• Footer

Examples

• Footer
• Main footer band and sub-footer band
• Contextual band and sub-footer band
• Hide optional links from the sub-footer band
• Contextual band and sub-footer band with no optional links
• Bande principale et bande sous pied de page sans les liens facultatifs
• Sub-footer band only
• Sub-footer band only, with no optional links
• Customize 'Terms and conditions' and 'Privacy' links in footer
• Contextual band and link variations

Reports

• Accessibility assessment #1 - Footer

Documentation on how to use the GCWeb menu.

View source code

Documentation

• GCWeb Menu

Documentation on how to use the header.

View source code

Documentation

• Header

Reports

• Accessibility assessment #7 - GC header brand logo
• Accessibility assessment #8 - GC header brand logo

Helpers to overwrite compiled styles

View source code

Documentation

• Colour

Documentation on how to use language toggle link.

View source code

Documentation

• Language toggle link

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

View source code

Documentation

• Main page title documentation

Examples

• Content page with default main page title
• Stacked main page title
• Main page title aligned on the right
• Main page title in a div aligned on the right
• Stacked main page title in a div aligned on the right
• Stacked main page title aligned on the right
• Main page title with byline for news articles

Documentation on how to use the page details section.

View source code

Documentation

• Documentation for Page details

Examples

• Default Page details
• Page details with GC feedback

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 (Basic Html version)- English report

Documentation on how to implement the site search box.

View source code

Documentation

• Site search box

Secondary menu component

View source code

Examples

• Task 1
• Sub task 1
• Sub task 2
• Sub task 3
• Sub task 4
• Sub task 5
• Sub task 6
• Sub task 7
• Task 2
• Task 3
• Sub task 1
• Sub task 2
• Sub sub task 1
• Sub sub task 2
• Sub task 3
• Task 4

Documentation and working example on how to use the skiplinks.

View source code

Examples

• Skip links

Reports

• Accessibility assessment #1 - Skip links

Fetch data using Ajax

View source code

Examples

• Ajax Fetch

Reports

• Pre Accessibility assessment #1 - AJAX Fetch

Alerts with custom styles.

View source code

Examples

• Alerts

Reports

• Accessibility assessment #1 - Alert

Alignment with custom styles.

View source code

Examples

• Alignment

Utility classes to implement various border styles.

View source code

Documentation

• Borders

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

View source code

Examples

• Buttons

Reports

• Accessibility assessment #3 - Buttons
• Accessibility assessment #4 - Buttons

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

View source code

Documentation

• Colour (Foreground/Background)

Example of all the possible styled list variant

View source code

Examples

• Lists
• List group
• Custom list styling using parent div element

Main Container with alternate tags.

View source code

Examples

• Main Container
• Main Container with article
• Main Container with section

Reports

• Pre Accessibility assessment #1 - Main Container

HTML elements used as is.

View source code

Examples

• Forms
• Text level semantics
• Grouping Content

Reports

• Accessibility assessment #1 - Input focus
• Text level semantics - Full Accessibility assessment
• Accessibility assessment #2 - Forms
• Accessibility assessment #3 - Forms

Utility classes to add spacing between elements.

View source code

Examples

• Spacing

Tables with custom styles

View source code

Examples

• Tables

Text-level modifiers for styling and formatting

View source code

Examples

• Text-level modifiers

Enable Basic HTML Mode

View source code

Examples

• Basic HTML

Reports

• Pre-accessibility assessment #1 - Basic HTML Mode

Save events directly into personal calendar

View source code

Examples

• Add to Calendar

Documentation

• Add to Calendar

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

View source code

Examples

• Background image

Documentation

• Background image

Interface for navigating a chronological list of events

View source code

Examples

• Calendar of Events

Documentation

• Calendar of Events

Handles date-related functionalities like displaying calendars and picking dates.

View source code

Examples

• Calendar

Dynamically generates charts and graphs from table data

View source code

Examples

• Charts and graphs - Simple and easy
• Charts and graphs - Customization
• Charts and graphs - Labels and reference values
• Charts and graphs - Customizing pie charts
• Charts and graphs - Specific test cases

Documentation

• Charts and graphs - Simple and easy

Alerts which can be collapsed by the user

View source code

Examples

• Collapsible alerts

Documentation

• Collapsible alerts

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

View source code

Examples

• Country Content

Documentation

• Country Content

A basic AjaxLoader wrapper that inserts AJAXed in content

View source code

Examples

• Data Ajax

Documentation

• Data Ajax

Map a query parameter value into an input value

View source code

Examples

• Data Fusion Query

Documentation

• Data Fusion Query

Displays an overlay when a section moves out of the viewport

View source code

Examples

• Data Inview

Documentation

• Data Inview

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

View source code

Examples

• Data Picture

Documentation

• Data Picture

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

View source code

Examples

• Details closed

Documentation

• Details closed

Make content dismissable by users

View source code

Examples

• Dismissable content

Documentation

• Dismissable content

Equalises the height of elements that are on the same baseline

View source code

Examples

• Equal height (pure CSS)
• Equal height

Documentation

• Equal height

Other

• Equal height (pure CSS)

Redirects users to another site

View source code

Examples

• Exit script

Documentation

• Exit script

Helps with implementing Facebook embedded pages

View source code

Examples

• Facebook

Documentation

• Facebook

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

View source code

Examples

• Favicon

Documentation

• Favicon

Aggregates and displays entries from one or more Web feeds.

View source code

Documentation

• Feeds

Examples

• Feeds

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

View source code

Examples

• Filter

Documentation

• Filter

This plugin allows developers to easily embed footnotes into their Web pages, and helps to achieve WCAG 2.0 compliance when providing such footnotes

View source code

Examples

• Footnotes

Documentation

• Footnotes

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

View source code

Examples

• Form validation

Documentation

• Form validation

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

View source code

Examples

• Geomap

Documentation

• Geomap

Handles JSON data fetching and triggers events for success or failure.

View source code

Examples

• JSON fetch

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

View source code

Examples

• Lightbox

Documentation

• Lightbox

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

View source code

Documentation

• Menu

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

View source code

Examples

• Multimedia Player - Video
• Multimedia Player - Audio-only
• Multimedia Player - YouTube

Documentation

• Multimedia Player

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

View source code

Examples

• Overlay

Documentation

• Overlay

Adds pagination at the bottom of a list of items

View source code

Examples

• Paginate

Documentation

• Paginate

Replace Personal Identifiable Information (PII) from the form flagged fields with redacted characters.

View source code

Examples

• PII Scrub

Documentation

• PII Scrub

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

View source code

Examples

• Prettify

Documentation

• Prettify

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

View source code

Examples

• Session Timeout

Documentation

• Session Timeout

Enables users to quickly share content with their networks

View source code

Examples

• Share widget

Documentation

• Share widget

Reports

• Accessibility assessment #1 - Share widget

This component provides the ability to break a form into steps

View source code

Examples

• Steps Form

Documentation

• Steps Form

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

View source code

Examples

• Tables
• Table Filters

Documentation

• Tables

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

View source code

Examples

• Tabbed Interface
• Tabbed Interface - Carousel

Documentation

• Tabbed Interface

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

View source code

Examples

• Tag filter

Documentation

• Tag filter

Reports

• Accessibility assessment #1 - Tag filter

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

View source code

Examples

• Text highlighting

Documentation

• Text highlighting

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

View source code

Examples

• Toggle

Documentation

• Toggle

Reports

• Accessibility assessment #1 - toggle

Helps with implementing Twitter embedded timelines

View source code

Examples

• Twitter

Documentation

• Twitter

Insert content extracted from a JSON file

View source code

Examples

• Data JSON
• Template HTML 5

Documentation

• Data JSON

Enable Basic HTML Mode on any given page to simplify the readability of the page by executing the bare minimum DOM manipulations

View source code

Examples

• Basic HTML

Documentation

• Basic HTML

A user-agent safe method for assigning focus to an element.

View source code

Examples

• Focus

Manage dataset and apply JSON Patch

View source code

Examples

• JSON Manager
• with Do Action patches

Documentation

• JSON Manager

Identifies URLs in a navigation system that match the current page URL or a URL in the breadcrumb trail.

View source code

Examples

• NavCurrent

Submit web form through AJAX call

View source code

Examples

• Postback

Documentation

• Postback

Randomly picks one of the child elements

View source code

Examples

• Randomize

Documentation

• Randomize

Handles text and window resizing events, and triggers events based on changes in text size, window width, and window height.

View source code

Examples

• Resize

Zebra striping for tables

View source code

Examples

• Zebra striping

Documentation

• Zebra striping