Versions précédentes du pied de page
Version 7.0 (deprecated)
- Ajout de "www." à l'URL de "Canada et le monde"
Exemple pratique: Pied de page version 7.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 6.0 (deprecated)
- Changé l'URL du lien "Vétérans et militaires".
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://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>
Exemple pratique: Pied de page version 6.0
Version 5.0 (Retiré à partir de GCWeb v16.0.0)
- Changé “All Contacts” à “All contacts” dans la version anglaise.
Version 4.0 (Retiré à partir de GCWeb v16.0.0)
Les modifications suivantes ont été apportées depuis la version 2.0 :
- Ajout d'une bande contextuelle au-dessus de la bande principale.
- Spécifique à GCWeb Jekyll : le titre et les liens sont définis de façon globale dans
_config.yml
. Il est également possible de retirer globalement le pied de page contextuel en supprimant sa définition dans_config.yml
. - Spécifique à GCWeb Jekyll : le titre et les liens peuvent être modifiés pour des pages spécifiques dans la propriété
contextualFooter
de la page.
- Spécifique à GCWeb Jekyll : le titre et les liens sont définis de façon globale dans
- 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é.
- Spécifique à GCWeb Jekyll : le lien de saut vers le pied de page doit demeurer en tout temps.
Version 3.0 (Retiré à partir de GCWeb v16.0.0)
Les modifications suivantes ont été apportées depuis la version 2.0 :
- Ajout d'une section « Contextuel » au-dessus de la section « À propos du gouvernement ».
- Spécifique à GCWeb Jekyll : le titre et les liens sont définis de façon globale dans
_config.yml
. Il est également possible de retirer globalement le pied de page contextuel en supprimant sa définition dans_config.yml
. - Spécifique à GCWeb Jekyll : le titre et les liens peuvent être modifiés pour des pages spécifiques dans la propriété
supportFooter
de la page.
- Spécifique à GCWeb Jekyll : le titre et les liens sont définis de façon globale dans
- Ajout d'un nouveau titre « Gouvernement du Canada » dans la section « À propos du gouvernement ».
- Ajout d'une ligne de liens pangouvernementaux.
- Ajout d'une courte ligne horizontale blanche (
<hr />
) pour séparer les liens pangouvernementaux et les liens thématiques. - Modification de la liste des liens thématiques.
- Les classes pour la liste de liens thématiques ont été mis à jour pour
list-col-xs-1 list-col-sm-2 list-col-md-3
.- Les colonnes 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.
- Séparation des liens utilitaires en deux listes non ordonnées, car certains liens ne peuvent plus être masqués.
- Ajout d'une courte barre verticale grise entre les deux listes pour les points d'arrêt
md
etlg
. - Ajout d'une courte barre horizontale grise entre les deux listes pour les points d'arrêt
xxs
etxs
. - Sur le point d'arrêt
sm
, les deux listes sont visuellement séparées en étant l'une au-dessus de l'autre.
- Ajout d'une courte barre verticale grise entre les deux listes pour les points d'arrêt
- Suppression de l'ancre « Haut de page ».
- Refonte complète des titres du pied de page pour l'accessibilité.
- Spécifique à GCWeb Jekyll : le lien de saut de pied de page doit rester lorsque seul le pied de page contextuel est affiché.
Version 2.0 (Retiré à partir de GCWeb v16.0.0)
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
.
Version 1.0 (Retiré à partir de GCWeb v16.0.0)
Voici la version 1.0 (obsolète) du pied de page par défaut.
Détails de la page
- Date de modification :