Sélection de la langue

Recherche


Versions précédentes du pied de page

Version 6.0

Exemple pratique: Pied de page version 6.0

Code final attendu
<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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
			</div>
		</div>
	</div>
</footer>

Version 5.0 (deprecated)

Exemple pratique: Pied de page version 5.0

Code final attendu
<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.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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
				</div>
			</div>
		</div>
	</footer>

Version 4.0 (deprecated)

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

Exemple pratique: Pied de page version 4.0 (dépréciée)

Code final attendu
<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.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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
			</div>
		</div>
	</div>
</footer>

Version 3.0 (dépréciée)

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

Exemple pratique: Pied de page version 3.0 (dépréciée)

Code final attendu
<footer id="wb-info">
	<h2 class="wb-inv">À propos de ce site</h2>
	<div class="gc-contextual">
		<div class="container">
			<nav>
				<h3>[Titre du menu 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="landscape">
		<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 vastes auditoires</span></h4>
				<ul class="list-col-xs-1 list-col-sm-2 list-col-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 et industrie</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.html">Vétérans</a></li>
					<li><a href="https://www.canada.ca/fr/services/jeunesse.html">Jeunesse</a></li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="brand">
		<div class="container d-flex align-items-center">
			<nav>
				<h3 class="wb-inv">Liens d'assistance</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://www1.canada.ca/fr/nouveausite.html">À propos de Canada.ca</a></li>
				</ul>
				<h4><span class="wb-inv">Transparence</span></h4>
				<ul>
					<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="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
			</div>
		</div>
	</div>
</footer>

Version 2.0 (deprecated)

Voici la version 2.0 du pied de page par défaut.

Mis à jour pour utiliser la classe colcount-xs-2 au lieu de colcount-sm-2.

Exemple pratique: Pied de page version 2.0

Code final attendu
<footer id="wb-info">
	<div class="landscape">
		<nav class="container wb-navcurr">
			<h2 class="wb-inv">Au sujet du gouvernement</h2>
			<ul class="list-unstyled colcount-xs-2 colcount-md-3">
				<li><a href="https://www.canada.ca/fr/contact.html">Contactez-nous</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/fonctionpublique.html">Fonction publique et force militaire</a></li>
				<li><a href="https://www.canada.ca/fr/nouvelles.html">Nouvelles</a></li>
				<li><a href="https://www.canada.ca/fr/gouvernement/systeme/lois.html">Traités, lois et règlements</a></li>
				<li><a href="https://www.canada.ca/fr/transparence/rapports.html">Rapports à l'échelle du gouvernement</a></li>
				<li><a href="https://pm.gc.ca/fra">Premier ministre</a></li>
				<li><a href="https://www.canada.ca/fr/gouvernement/systeme.html">Comment le gouvernement fonctionne</a></li>
				<li><a href="https://ouvert.canada.ca/">Gouvernement ouvert</a></li>
			</ul>
		</nav>
	</div>
	<div class="brand">
		<div class="container">
			<div class="row ">
				<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
					<h2 class="wb-inv">À propos de ce site</h2>
					<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://www1.canada.ca/fr/nouveausite.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="col-xs-6 visible-sm visible-xs tofpg">
					<a href="#wb-cont">Haut de la page <span class="glyphicon glyphicon-chevron-up"></span></a>
				</div>
				<div class="col-xs-6 col-md-3 col-lg-2 text-right"><img src="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
				</div>
			</div>
		</div>
	</div>
</footer>

Version 1.0 (dépréciée)

Voici la version 1.0 (dépréciée) du pied de page par défaut.

Exemple pratique: Pied de page version 1.0 (dépréciée)

Code final attendu
<footer id="wb-info">
	<div class="landscape">
		<nav class="container wb-navcurr">
			<h2 class="wb-inv">Au sujet du gouvernement</h2>
			<ul class="list-unstyled colcount-sm-2 colcount-md-3">
				<li><a href="https://www.canada.ca/fr/contact.html">Contactez-nous</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/fonctionpublique.html">Fonction publique et force militaire</a></li>
				<li><a href="https://www.canada.ca/fr/nouvelles.html">Nouvelles</a></li>
				<li><a href="https://www.canada.ca/fr/gouvernement/systeme/lois.html">Traités, lois et règlements</a></li>
				<li><a href="https://www.canada.ca/fr/transparence/rapports.html">Rapports à l'échelle du gouvernement</a></li>
				<li><a href="https://pm.gc.ca/fra">Premier ministre</a></li>
				<li><a href="https://www.canada.ca/fr/gouvernement/systeme.html">Comment le gouvernement fonctionne</a></li>
				<li><a href="https://ouvert.canada.ca/">Gouvernement ouvert</a></li>
			</ul>
		</nav>
	</div>
	<div class="brand">
		<div class="container">
			<div class="row ">
				<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
					<h2 class="wb-inv">À propos de ce site</h2>
					<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://www1.canada.ca/fr/nouveausite.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="col-xs-6 visible-sm visible-xs tofpg">
					<a href="#wb-cont">Haut de la page <span class="glyphicon glyphicon-chevron-up"></span></a>
				</div>
				<div class="col-xs-6 col-md-3 col-lg-2 text-right"><img src="/dist/GCWeb/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada">
				</div>
			</div>
		</div>
	</div>
</footer>

Détails de la page

Date de modification :