Pied de page complet

Le pied de page général (à l’échelle du site) situé au bas de chaque page Web peut contenir jusqu’à 3 bandes :

Bande contextuelle
Bande principale
Bande sous pied de page

Consultez le système de conception de Canada.ca pour savoir quels éléments de pied de page ou quelles implémentations adaptées utiliser en fonction du type de page que vous créez :

Pied de page général - Système de conception Canada.ca

Changements récents

Version 6.0

Les modifications suivantes ont été apportées depuis la version 2.0 :

Ajout d’une bande contextuelle au-dessus de la bande principale.
La classe .landscape a été renommée à .gc-main-footer
Ajout d’un nouveau titre « Gouvernement du Canada » dans la bande principale.
Ajout d’une ligne de liens pangouvernementaux.
Ajout d’une courte ligne horizontale blanche pour séparer les liens pangouvernementaux et les liens de thèmes et sujets.
Modification de la liste des liens de thèmes et sujets.
Les classes pour la liste de liens de thèmes et sujets ont été mises à jour pour list-col-xs-1 list-col-sm-2 list-col-md-3.
- Certaines listes utilisent désormais la fonctionnalité CSS « Flexbox », qui distribue les liens horizontalement au lieu de verticalement.
- Les liens sont maintenant affichés en une (1) colonne sur les très petits écrans, en deux (2) colonnes sur les petits écrans et en trois (3) colonnes sur les écrans moyens et plus grands.
La classe .brand a été renommée à .gc-sub-footer
Les liens « Avis » et « Confidentialité » doivent désormais rester visibles à tout moment, même lorsque noFooterCorporate est défini à « true ».
Suppression de l’ancre « Haut de page ».
Refonte complète des titres du pied de page pour l’accessibilité.

Les modifications suivantes ont été apportées depuis la version 4.0 :

Changement de “All Contacts” à “All contacts” dans la version anglaise.
Changé l’URL du lien “Vétérans et militaires”.

Implémentation de référence

Code final attendu - pied de page complet

<footer id="wb-info">
	<h2 class="wb-inv">À propos de ce site</h2>
<div class="gc-contextual">
		<div class="container">
			<nav>
				<h3>[Bande du pied de page contextuel]</h3>
				<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3"><li><a href="http://canada.ca/fr">Lien contextuel 1</a></li><li><a href="http://canada.ca/fr">Lien contextuel 2</a></li><li><a href="http://canada.ca/fr">Lien contextuel 3</a></li></ul>
			</nav>
		</div>
	</div>

	<div class="gc-main-footer">
		<div class="container">
			<nav>
				<h3>Gouvernement du Canada</h3>
				<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3"><li><a href="https://www.canada.ca/fr/contact.html">Toutes les coordonnées</a></li>
					<li><a href="https://www.canada.ca/fr/gouvernement/min.html">Ministères et organismes</a></li>
					<li><a href="https://www.canada.ca/fr/gouvernement/systeme.html">À propos du gouvernement</a></li></ul>
				<h4><span class="wb-inv">Thèmes et sujets</span></h4>
				<ul class="list-unstyled colcount-sm-2 colcount-md-3"><li><a href="https://www.canada.ca/fr/services/emplois.html">Emplois</a></li>
					<li><a href="https://www.canada.ca/fr/services/immigration-citoyennete.html">Immigration et citoyenneté</a></li>
					<li><a href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
					<li><a href="https://www.canada.ca/fr/services/entreprises.html">Entreprises</a></li>
					<li><a href="https://www.canada.ca/fr/services/prestations.html">Prestations</a></li>
					<li><a href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
					<li><a href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
					<li><a href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
					<li><a href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
					<li><a href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
					<li><a href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
					<li><a href="https://www.canada.ca/fr/services/transport.html">Transport et infrastructure</a></li>
					<li><a href="https://www.international.gc.ca/world-monde/index.aspx?lang=fra">Le Canada et le monde</a></li>
					<li><a href="https://www.canada.ca/fr/services/finance.html">Argent et finance</a></li>
					<li><a href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li>
					<li><a href="https://www.canada.ca/fr/services/autochtones.html">Autochtones</a></li>
					<li><a href="https://www.canada.ca/fr/services/veterans-militaire.html">Vétérans et militaires</a></li>
					<li><a href="https://www.canada.ca/fr/services/jeunesse.html">Jeunesse</a></li></ul>
			</nav>
		</div>
	</div>

	<div class="gc-sub-footer">
		<div class="container d-flex align-items-center">
			<nav>
				<h3 class="wb-inv">Organisation du gouvernement du Canada</h3>
				<ul>
					<li><a href="https://www.canada.ca/fr/sociaux.html">Médias sociaux</a></li>
					<li><a href="https://www.canada.ca/fr/mobile.html">Applications mobiles</a></li>
					<li><a href="https://www.canada.ca/fr/gouvernement/a-propos.html">À propos de Canada.ca</a></li><li><a href="https://www.canada.ca/fr/transparence/avis.html">Avis</a></li>
					<li><a href="https://www.canada.ca/fr/transparence/confidentialite.html">Confidentialité</a></li></ul>
			</nav>
			<div class="wtrmrk align-self-end">
				<img src="https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada" />
			</div>
		</div>
	</div>
</footer>

Implémentations alternatives

Les pages régulières

Bande principale et bande sous pied de page

Les pages transactionnelles et les pages de campagne

Implémentation GCWeb Jekyll

Pour la bande contextuelle au-dessus de la bande principale:
- le titre et les liens sont définis de façon globale dans _config.yml. Il est également possible de retirer globalement la bande contextuelle en supprimant sa définition dans _config.yml.
- le titre et les liens peuvent être modifiés pour des pages spécifiques dans la propriété contextualFooter de la page.
Les liens « Avis » et « Confidentialité » doivent désormais rester visibles à tout moment, même lorsque noFooterCorporate est défini à « true ».
Le lien de saut vers le pied de page doit demeurer en tout temps.

Versions du pied de page précédentes

Voici une liste des versions de pied de page précédentes avec leurs exemples de code associés.

Détails de la page

Date de modification :: 2023-01-16

Sélection de la langue

Recherche