th-canada-strong - Méli-mélo details

Styles used for the Canada Strong campaign

Sponsored by: Principal Publisher on behalf of the Privy Council Office

Examples

• Canada Strong theme
• Thématique Un Canada fort
• Landing page layout
• Gabarit de page d'accueil
• Support page layout
• Gabarit de page de soutien

Thematic definition

Class CSS list

• canada-strong
• hero (scope: canada-strong)
• title-bar (scope: canada-strong)
• card-audience (scope: canada-strong)
• card-support (scope: canada-strong)
• end-page-promo (scope: canada-strong)
• support-banner (scope: canada-strong)

JavasScript function list

Implementation note

The following notes must be applied when implementing this thematic to ensure it follows the principle of progressive enhancement. These instructions must be followed so that the web page stays functional and conforming after the expiration date and removal of this thematic.

• The end-page-promo class is placed in a full-width section using the bg-light and py-3 classes for the grey band.
• The card-support class must be accompanied with the panel and panel-default classes.
• The support-banner class must be accompanied with the panel class.
• The hero background image is decorative. Use data-bgimg-srcset with the no-image value at 1199w to remove it on screens narrower than 1200 pixels.

Accessibility statement

The accessibility statement is currently missing.