Thématique Un Canada fort

Exemples pratiques

• Gabarit de page d'accueil
• Gabarit de page de soutien

Classes CSS

canada-strong

Élément qui entoure le contenu de la campagne. Les classes ci-dessous en dépendent.

hero

Le dégradé sur l'image fait partie de l'image, la bannière ne définit donc que la position de l'image. À utiliser avec bg-cover et data-bgimg-srcset, avec la valeur no-image à 1199w pour retirer l'image décorative sur les écrans de moins de 1200 pixels.

title-bar

Barre de titre bordeaux avec un texte blanc, appliquée directement sur le titre.

card-audience

Carte bordeaux avec un texte et des liens blancs, et un court soulignement rouge sous le titre. À utiliser avec p-3 mb-3 pour l'espacement, et avec hght-inhrt dans une rangée wb-eqht-grd pour des cartes de hauteur égale.

card-support

Carte encadrée avec une icône ronde. À utiliser avec panel panel-default, et avec hght-inhrt dans une rangée wb-eqht-grd pour des cartes de hauteur égale. Ajoutez position-relative à la carte et stretched-link au lien du titre pour rendre toute la carte cliquable.

end-page-promo

Promotion bleu marine avec une icône ronde blanche, ainsi qu'un texte et des liens blancs. À placer après le contenu de la page, dans une section pleine largeur utilisant bg-light py-3 pour la bande grise.

support-banner

Bannière bordeaux avec un h1 blanc et une image, pour les sous-pages. Placez le titre avant l'image dans l'ordre source. Cette classe s'utilise avec panel.

Éléments de la thématique

Ajoutez la classe canada-strong à l'élément qui entoure le contenu de la page. La mise en page et l'espacement utilisent les classes utilitaires de WET et de GCWeb. Dans les exemples pratiques, la bannière principale et la bannière de sous-page utilisent un h2 afin que la page de documentation conserve un seul h1, et le conteneur de la bannière principale est un container-fluid puisque les exemples se trouvent déjà dans un conteneur. Dans une vraie page, utilisez <h1 property="name" id="wb-cont"> et un container.

Bannière principale

Le dégradé sur l'image fait partie de l'image, la bannière ne définit donc que la position de l'image. À utiliser avec bg-cover et data-bgimg-srcset, avec la valeur no-image à 1199w pour retirer l'image décorative sur les écrans de moins de 1200 pixels.

Exemple pratique

Code

<div class="canada-strong">
	<div class="hero bg-cover" data-bgimg-srcset="[chemin de l'image]/hero_banner.png 1920w, https://wet-boew.github.io/vocab/wb/utilities#no-image 1199w">
		<div class="container py-4">
			<div class="row">
				<div class="col-xs-12 col-md-6">
					<h1 property="name" id="wb-cont" class="mt-0">[Titre]</h1>
					<p>[Description]</p>
				</div>
			</div>
			<p class="mb-0"><a class="btn btn-call-to-action" href="#">[Appel à l'action]</a></p>
		</div>
	</div>
	[...]
</div>

Barre de titre

Barre de titre bordeaux avec un texte blanc, appliquée directement sur le titre.

Exemple pratique

Code

<div class="canada-strong">
	<h2 class="title-bar mt-4 mb-3">[Titre]</h2>
</div>

Cartes par public

Carte bordeaux avec un texte et des liens blancs, et un court soulignement rouge sous le titre. À utiliser avec p-3 mb-3 pour l'espacement, et avec hght-inhrt dans une rangée wb-eqht-grd pour des cartes de hauteur égale.

Exemple pratique

Les entreprises

Des subventions, des financements et d’autres aides sont mis à votre disposition pour aider votre entreprise à s’adapter, à se développer et à toucher de nouveaux marchés.

Découvrez les aides destinées aux entreprises

Les travailleurs

Des programmes et des services sont mis à votre disposition pour vous aider à trouver un emploi, à suivre des formations et à planifier votre prochaine étape.

Découvrez les aides destinées aux travailleurs

Les employeurs

Des programmes et des services sont mis à votre disposition pour vous aider à gérer et à accompagner votre personnel.

Découvrez les aides destinées aux employeurs

Code

<div class="canada-strong">
	<div class="row wb-eqht-grd">
		<div class="col-sm-4">
			<div class="p-3 mb-3 card-audience hght-inhrt">
				<img src="[chemin de l'image]/[icône]" width="64" height="64" alt="" decoding="async">
				<h3 class="h5">[Titre]</h3>
				<p>[Description]</p>
				<p><a href="#">[Lien]</a></p>
			</div>
		</div>
		[...]
	</div>
</div>

Cartes de soutien

Carte encadrée avec une icône ronde. À utiliser avec panel panel-default, et avec hght-inhrt dans une rangée wb-eqht-grd pour des cartes de hauteur égale. Ajoutez position-relative à la carte et stretched-link au lien du titre pour rendre toute la carte cliquable.

Exemple pratique

Nouvelles mesures de soutien

Programme de maintien à l'emploi et de réorientation de la main-d’œuvre

Ce programme offrira des mesures de soutien souples et accessibles aux entreprises confrontées à des difficultés économiques.

Initiative régionale de réponse tarifaire

Ce financement aidera les petites et moyennes entreprises à faire face aux pressions engendrées par les droits de douane.

Programme Pivoter pour se propulser de la BDC

Un volet consacré aux liquidités pour répondre aux besoins en fonds de roulement des entreprises.

Fonds de diversification pour un Canada fort

Un appui aux entreprises touchées par les droits de douane ayant des projets prêts à démarrer.

Code

<div class="canada-strong">
	<h2 class="title-bar h3 mt-4 mb-3">[Titre]</h2>
	<div class="row wb-eqht-grd">
		<div class="col-xs-12 col-md-6 col-lg-3">
			<article class="panel panel-default brdr-rds-0 card-support hght-inhrt position-relative">
				<div class="panel-body">
					<img src="[chemin de l'image]/[icône]" width="58" height="58" alt="" loading="lazy" decoding="async">
					<h3 class="h4"><a class="stretched-link" href="#">[Titre]</a></h3>
					<p>[Description]</p>
				</div>
			</article>
		</div>
		[...]
	</div>
</div>

Promotion de fin de page

Promotion bleu marine avec une icône ronde blanche, ainsi qu'un texte et des liens blancs. À placer après le contenu de la page, dans une section pleine largeur utilisant bg-light py-3 pour la bande grise.

Exemple pratique

Ensemble, bâtissons un Canada fort

Investir dans nos travailleurs, nos industries et nos collectivités. Bâtir une économie par les Canadiens, pour les Canadiens.

Bâtir une économie forte

Code

<div class="canada-strong">
	<section class="bg-light py-3">
		<div class="container">
			<div class="end-page-promo">
				<img src="[chemin de l'image]/strong_canada.svg" width="60" height="60" alt="" loading="lazy" decoding="async">
				<h2>[Titre]</h2>
				<p>[Description]</p>
				<p><a href="#">[Lien]</a></p>
			</div>
		</div>
	</section>
</div>

Bannière de sous-page

Bannière bordeaux avec un h1 blanc et une image, pour les sous-pages. Placez le titre avant l'image dans l'ordre source. Cette classe s'utilise avec panel.

Exemple pratique

Soutien aux entreprises touchées par les droits de douane

Code

<div class="canada-strong">
	<div class="panel support-banner container-fluid mrgn-tp-md">
		<div class="row">
			<div class="col-md-6 col-xs-12">
				<h1 property="name" id="wb-cont" class="mrgn-tp-lg mrgn-bttm-lg mrgn-lft-lg">[Titre]</h1>
			</div>
			<div class="col-md-6 col-xs-12">
				<img src="[chemin de l'image]/support_banner.jpg" class="img-responsive mrgn-tp-0" alt="">
			</div>
		</div>
	</div>
</div>

Listes de liens

Les listes de liens, comme sur la page de soutien, utilisent le modèle Services et information (gc-srvinfo).

Migration à partir du CSS intégré

Retirez le lecteur multimédia qui intègre le CSS personnalisé et renommez les classes comme suit. Les éléments et classes text-white dans les zones bordeaux et bleu marine ne sont plus nécessaires.