Sélection de la langue

Recherche


Bande contextuelle et des variations de lien

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

Implémentation de référence

Code final attendu - Pied de page sans la bande principale
<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="mailto:info@example.com">Courriel envoie vers</a></li><li><a href="?abc=123#ancre">Paramètre de lien et ancre</a></li><li><a href="../../">Deux dossiers parent</a></li><li><a href="tel:555-0123">Numéro de téléphone 555-0123</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 finances</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>

Lignes directrices

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 :

Détails de la page

Date de modification :