Conseils
Le pied de page est le bandeau situé au bas de chaque page, où sont affichés les liens de navigation secondaire et les renseignements sur les droits d’auteur. Il contribue à la cohérence visuelle et conceptuelle des sites Web et des applications.
Il existe deux styles de pied de page : le pied de page sombre et le pied de page clair. Le pied de page sombre est utilisé dans la plupart des sites Web et des applications. Les pieds de page étendus affichent le logo du GNB et des options de navigation secondaire supplémentaires. Ils conviennent notamment aux sites Web qui n’utilisent pas l’image de marque du gouvernement provincial ainsi qu’aux sites Web et aux applications qui pourraient bénéficier d’un outil de navigation secondaire global.
À faire
- Utilisez le pied de page pour fournir des liens pertinents qui s’appliquent à l’ensemble du site ou de l’application.
- Veillez à ce que le pied de page soit simple et épuré afin de ne pas confondre les utilisateurs.
- Veillez à ce que le contenu du pied de page soit uniforme dans l’ensemble du site Web ou de l’application.
- Veillez à ce que le pied de page soit accessible et visible sur toutes les tailles d’écran et tous les appareils.
- Utilisez le pied de page pour afficher des liens, des renseignements sur les droits d’auteur ou des coordonnées.
À ne pas faire
- N’utilisez pas le pied de page comme principal outil de navigation. Les utilisateurs risquent d’avoir du mal à trouver les informations dont ils ont besoin.
- N’utilisez pas le pied de page comme un espace fourre-tout ou vous pouvez ajouter du contenu ou des liens superflus.
- N’englobez jamais le pied de page dans une section ou dans un conteneur. Le pied de page est une section à part entière.
Pied de page sombre
Le style de pied de page par défaut destiné aux sites Web et aux applications du GNB.
HTML
<footer class="gnb-footer gnb-footer-dark">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Gouvernement du Nouveau-Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information et commentaires</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Commentaires</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/fr/corporate/communiquez.html">Médias
sociaux</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/fr/admin/declaration_de_confidentialite.html">Confidentialité</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/fr/admin/decharge.html">Décharge</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
Pied de page clair
Une version plus claire du style de pied de page par défaut destiné aux sites Web et aux applications du GNB.
HTML
<footer class="gnb-footer gnb-footer-light">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Gouvernement du Nouveau-Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information et commentaires</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Commentaires</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/fr/corporate/communiquez.html">Médias
sociaux</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/fr/admin/declaration_de_confidentialite.html">Confidentialité</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/fr/admin/decharge.html">Décharge</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
Pied de page sombre étendu
Les pieds de page étendus affichent le logo du GNB et des options de navigation secondaire supplémentaires.
La version blanche du logo du Nouveau-Brunswick (SVG 10 Ko) doit être utilisée dans le pied de page sombre.
HTML
<footer class="gnb-footer-extended gnb-footer-dark">
<div class="gnb-footer-extended-content">
<div class="container">
<div class="row">
<div class="logo col-lg-3">
<img src="../img/NB_white.svg" alt="Gouvernement du Nouveau-Brunswick" />
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-1">En-tête</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-1">
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a class="external-link" href="#">Dolor sit amet</a>
</li>
<li>
<a href="#">Consectetur adipiscing elit</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-2">En-tête</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-2">
<ul>
<li>
<a href="#">Ullamco laboris nisi</a>
</li>
<li>
<a href="#">Aliquip ex ea commodo</a>
</li>
<li>
<a href="#">Duis aute irure</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-3">En-tête</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-3">
<ul>
<li>
<a href="#">Sed do eiusmod</a>
</li>
<li>
<a href="#">Tempor incididunt</a>
</li>
<li>
<a class="external-link" href="#">Ut labore et dolore</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="gnb-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Gouvernement du Nouveau-Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information et commentaires</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Commentaires</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/fr/corporate/communiquez.html">Médias
sociaux</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/fr/admin/declaration_de_confidentialite.html">Confidentialité</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/fr/admin/decharge.html">Décharge</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</footer>
Pied de page clair étendu
Les pieds de page étendus affichent le logo du GNB et des options de navigation secondaire supplémentaires.
La version en couleur complète du logo du Nouveau-Brunswick (SVG 12 Ko) doit être utilisée dans le pied de page clair.
HTML
<footer class="gnb-footer-extended gnb-footer-light">
<div class="gnb-footer-extended-content">
<div class="container">
<div class="row">
<div class="logo col-lg-3">
<img src="../img/NB_white.svg" alt="Gouvernement du Nouveau-Brunswick" />
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-1">En-tête</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-1">
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a class="external-link" href="#">Dolor sit amet</a>
</li>
<li>
<a href="#">Consectetur adipiscing elit</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-2">En-tête</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-2">
<ul>
<li>
<a href="#">Ullamco laboris nisi</a>
</li>
<li>
<a href="#">Aliquip ex ea commodo</a>
</li>
<li>
<a href="#">Duis aute irure</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-3">En-tête</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-3">
<ul>
<li>
<a href="#">Sed do eiusmod</a>
</li>
<li>
<a href="#">Tempor incididunt</a>
</li>
<li>
<a class="external-link" href="#">Ut labore et dolore</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="gnb-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Gouvernement du Nouveau-Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information et commentaires</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Commentaires</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/fr/corporate/communiquez.html">Médias
sociaux</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/fr/admin/declaration_de_confidentialite.html">Confidentialité</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/fr/admin/decharge.html">Décharge</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</footer>