GC promotional thematic

Custom CSS and/or JavaScript for GC promotional thematic use. Check out the current list of promotional thematic projects below.

Support is provided during the wet-boew weekly code sprint happening remotely every Tuesday afternoon.

Rules for a proper GC promotional thematic project

Most of the information gathering from the rules described above must be put in a meta file accompanied with the project, see Canada day project as an example.

Keep in mind that all active features from any GC promotional thematic project are going to be merged into one unique CSS file and one unique JS file, like any méli-mélo compilation. This framework for GC promotional thematic projects is excluded from the GCWeb public API. Any change or removal would only trigger a patch release of GCWeb. That means the author is fully responsible but not required to document any subsequent change they would make to their project.

Progressive enhancement approach

If any thematic feature is removed from a web page, that page doesn't "break" and can still be navigated without any functional or design issues nor accessibility failures caused by such removal. If helpers are used to keep a web page's integrity, the project must have implementation notes just like the Canada day's implementation notes on its Details page.

Expiration date

A promotional thematic feature must include an expiration date that does not exceed one (1) year from its initial implementation. If needed, an extension may be granted upon agreement by the interested parties. To request an extension, the thematic owner must submit a formal request to Principal Publisher via the service desk online form and/or attend a WET-BOEW Office Hours session to discuss the request and obtain approval. During the renewal process, the team responsible of the WET-BOEW may:

• Request additional evidence to support the extension;
• Require the removal of certain sub-features;
• Propose converting the thematic into experimental features or integrating it as a stable feature.

Note: It is the responsibility of thematic owners to be aware of the expiration date and action accordingly. If no interest in renewing the thematic is expressed once the expiration date has been reached or passed, the thematic will be removed. In the case. the content will still be available but the default Canada.ca theme will then be automatically applied on page load.

Long term thematic feature

During the renewal of a thematic, the WET-BOEW team will analyze whether the feature should become a long term feature or not. In the eventuality that it does become a long term feature, an action plan based on the experimental feature must be provided. The exact goal and outcome would be adapted on a case by case basis via a discussion and pre-agreement between all the involved stakeholders. Delays may occur and should be expected in such situation.

Current list of GC promotional thematic projects

• Empathy theme - (Exp. November 30, 2026)
  • CSS: empathy
  • CSS: btn-empathy
  • CSS: text-empathy
  • JS: init - on detection of .provisional.gc-empathy
• Vitality theme - (Exp. November 30, 2026)
  • CSS: vitality
  • CSS: btn-vitality
  • CSS: text-vitality
  • CSS: bg-vitality
• Zero Emission Vehicles (ZEV) Theme - (Exp. May 31, 2026)
  • CSS: bg-zev-purple
  • CSS: bg-zev-green
  • CSS: btn-zev-purple
  • CSS: btn-zev-green
  • CSS: panel-zev-green
  • CSS: panel-zev-purple
• AI Answers theme - (Exp. February 28th, 2026)
  • CSS: aia-banner
  • CSS: aia-rescue
  • CSS: aia-close
  • JS: aiAnswersAvailabilityCheck
• Canada Day theme - (Exp. June 30, 2026)
  • CSS: bg-canadaday
  • CSS: panel-canadaday
  • CSS: brdr-canadaday
  • CSS: bg-canadaday-beige
  • CSS: canadaday
  • CSS: panel-canadaday-card
  • CSS: panel-canadaday-card-compact
• Choose Canada theme - (Exp. March 30, 2026)
  • CSS: choose-canada-banner
  • CSS: choose-canada-card
  • CSS: card-body (scope: choose-canada-card)
  • CSS: card-title (scope: choose-canada-card)
• Winterlude theme - (Exp. February 1, 2026)
  • CSS: bg-winterlude
  • CSS: panel-winterlude
  • CSS: brdr-winterlude
  • CSS: bg-winterlude-lightblue
  • CSS: winterlude

GC promotional thematic meta file

---
feature: thématique
lang: en
title: Title of the thematic usage
description: Short description of the added style
componentName: th-thematicName
expiry: Month DD, YYYY
cssClass:
- List of CSS class
jsFunctions:
- List of javascript function
a11yStatement: >
  Accessibility statement, describe what was tested, include any notes/instructions for implementers to follow in order to maintain the accessibility conformance, during and after the thematic expiration.
  Tested by (Name of the person - YYYY-MM-DD.
peNote:
- Progressive enhancement notes and instructions
pages:
  examples:
    - title: Title of the page
      language: en
      path: index.html
sponsor: Department - Representative name (@ github handle)
output: false
---

feature

Mandatory: Expected to have the exact value thématique

title

Mandatory: Technical code name for the project

expiry

Mandatory: Expiry date of when project feature can be safely removed

output

Mandatory: Expected to have the exact value false

a11yStatement

Mandatory: Accessibility conformance statement

sponsor

Mandatory: Name of the sponsor department and representative name with point of contact

pages

Mandatory: List of example pages for the thematic

peNote

Optional: Note and instructions on how to implement the thematic following progressive enhancement design approach

cssClass

Optional: Array for CSS class names defined in the project

jsFunctions

Optional: Array for public JavaScript function name defined in the project

See also: méli-mélo features for custom code that is in a preliminary state of experimentation.