Pied de page

Le pied de page est un élément de navigation secondaire mis à disposition de l’usager pour qu’il poursuive son parcours. Il propose également des éléments d’information complémentaires.

HTML

Le composant Pied de page est constitué d'un élément <footer> de classe fr-footer, avec l'attribut role="contentinfo", et un attribut id pour le lier au lien d'évitement "pied de page" via une ancre.

  • Un premier bloc, optionnel, de navigation permet d'ajouter des liens de navigations. Il s'agit d'un élément <div> de classe fr-footer__top.
    • Ce bloc doit contenir un élément <div> de classe fr-container qui permet de centrer le contenu ainsi qu'une grille pour structurer les liens en colonnes.
    • Utiliser la grille avec espacement entre les colonnes fr-grid-row--gutters. Ajouter autant de colonnes que nécessaire pour structurer les liens.
    • Dans chaque colonne ajouter :
      • Une catégorie de liens, optionnelle, avec un titre <h3>, ou autre niveau d'entête, de classe fr-footer__top-cat. Le libellé de la catégorie peut être un lien <a>.
      • Une liste de liens, <ul> de classe fr-footer__top-list, avec des liens <a> de classe fr-footer__top-link.
  • Puis les blocs suivant, contenu dans un élément <div> de classe fr-container pour centrer le contenu.
    • Le corps du pied de page, un élément <div> de classe fr-footer__body contenant :
      • Un bloc marque (voir Marque de l'état ), un élément <div> de classes fr-footer__brand et fr-enlarge-link.
        • Il contient à minima le bloc-marque, il s'agit du composant bloc-marque de l'état de classe fr-logo. Celui-ci doit être inséré dans un lien <a> pointant vers la page d'accueil et avec un attribut title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)".
        • Il peut aussi contenir un logo opérateur de l'État, une image (ou SVG) de classe fr-footer__logo.
          • Utiliser un attribut style="max-width:10rem;", avec comme valeur la largeur max du logo en fonction de son format (10rem pour du 16:9).
          • L'attribut alt doit être renseigné avec le nom de l'opérateur.
          • Le lien pointant vers l'accueil est alors positionné au niveau du logo de l'opérateur, il est automatiquement étendu à toute la zone du bloc marque.
          • L'attribut title du lien doit être renseigné sous la forme "Retour à l’accueil du site - [texte alternatif de l’image (nom de l'opérateur ou du site serviciel)] - République Française".
      • Un bloc de contenu, un élément <div> de classe fr-footer__content contenant :
        • Une description du site, optionnelle, un élément <p> de classe fr-footer__content-desc. La description doit être concise et informative, ne pas dépasser 3 lignes.
        • Une liste de liens, obligatoire et non modifiable, <ul> de classe fr-footer__content-list, avec des <li> de classe fr-footer__content-item, et des liens <a> de classe fr-footer__content-link.
          • Les liens doivent être ordonnés dans cet ordre : info.gouv.fr, service-public.fr, legifrance.gouv.fr, data.gouv.fr
          • Les liens doivent pointer vers les sites respectifs en s'ouvrant dans une nouvelle fenêtre.
    • Le bloc logos partenaires, optionnel, une <div>de classe fr-footer__partners. Ce bloc contient :
      • Un titre <h2>, ou autre niveau d'entête, de classe fr-footer__partners-title.
      • Un conteneur fr-footer__partners-logos permettant de positionner un bloc de logo principal <div> de classe fr-footer__partners-main et/ou un bloc de logos secondaires <div> de classe fr-footer__partners-sub (utiliser une liste <ul><li> s'il y en a plusieurs).
        • Chaque logo est formé d'une image (ou SVG) de classe fr-footer__logo.
          • Utiliser un attribut style="height: 5.625rem", avec comme valeur la hauteur max désirée. Uniformiser la hauteur des logos pour une meilleure lisibilité.
          • L'attribut alt doit être renseigné avec le nom du partenaire.
          • Un lien pointant vers le site du partenaire peut englober l'image du logo partenaire.
    • Le bas du pied de page, obligatoire, un élément <div> de classe fr-footer__bottom contenant :
      • Une liste de liens liés aux obligations légales, <ul> de classe fr-footer__bottom-list, <li> de classe fr-footer__bottom-item, et des liens <a> de classe fr-footer__bottom-link. Cette liste doit être définie en fonction du site, toutefois les liens & contenus suivants sont obligatoires : “accessibilité : non/partiellement/totalement conforme”, mentions légales, données personnelles et gestion des cookies.
      • Une mention de la licence, contenu dans une <div> de classe fr-footer__bottom-copy, sous forme d'un paragraphe avec l'intitulé : “Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous licence etalab-2.0” (ajouter un lien vers la licence)

Exemple de structure minimale

Exemple de structure complète Cet exemple inclut un bloc de navigation, un bloc-marque avec logo opérateur, et un bloc de logos partenaires, en plus du contenu minimal.

CSS

Installation du CSS

Pour fonctionner correctement, les styles CSS du core du pied de page doivent être importés. Il faudra aussi importer les styles du composant Bloc-marque (logo). L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec le fichier minifié, car plus léger. 

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/footer/footer.min.css" rel="stylesheet">
<link href="dist/component/logo/logo.min.css" rel="stylesheet">

NB : Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour fonctionner sur Internet Explorer 11, un fichier legacy peut aussi être importé : 

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/footer/footer.legacy.min.css" rel="stylesheet">
<link href="dist/component/logo/logo.legacy.min.css" rel="stylesheet">

JavaScript

Le composant Pied de page ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.

Note de version

Voir les évolutions sur github

v1.12.0 - 19 juin 2024

réduction de la zone de clic retour à l'accueil

  • sur le header mobile la partie à droite du brand n'est plus cliquable pour éviter les clics manqués sur le burger ou la recherche, et le lien du nom de service n'est plus étendu sur toute la largeur
  • sur le footer mobile la zone de clic n'est plus étendu sur toute la largeur

🐛 fix

footer

header

#944

title des liens obligatoires du footer

  • remplace l'intitulé par défaut "[A modifier]" de l'attribut title par l'intitulé officiel sur les liens obligatoires du footer.
  • change l'ordre des liens, et gouvernement.fr devient info.gouv.fr

🐛 fix

footer

#905

v1.11.1 - 31 janvier 2024

retrait de l'icone target blank

🐛 fix

footer

header

connect

#872

v1.11.0 - 11 décembre 2023

ajustements

  • corrige le niveau de titre des partenaires
  • le texte filler de footer__content-desc doit faire maximum 3 lignes en desktop
  • passe les liens .fr-footer__content-link en $text-default-grey
  • passe le padding top de .fr-footer__bottom-list à 4v
  • correction des espacements autour de fr-footer-body : en mobile et en desktop (32px en haut et 24px en bas)
  • titre “nos partenaire“ → fr-footer__partners-title passe en graisse régular, couleur text-default-grey
  • ecart de 12px sous “Nos partenaire” en mobile/desktop
  • enleve le padding sur .fr-footer__partners .fr-footer__logo, ajoute une border 1px en $border-default-grey + un background en background-default-grey
  • en desktop l’ecart entre logo et bloc mark passe à 32px
  • passe le logo opérateur en 16x9
  • ajoute un margin bottom négatif de 8px sur le groupe de lien pour garder 24px en dessous
  • retire le padding sur les images des logos partenaire
  • passe à 16px entre les logos partenaires secondaires
  • rend les partenaires secondaires facultatifs
  • corrige alignement des liens en bas du footer

🐛 fix

footer

#792

v1.10.0 - 19 juillet 2023

retrait de CSS obsolète

  • retrait de CSS résiduel de précédentes versions dans le footer-bottom__list

🐛 fix

footer

#668

v1.9.1 - 11 avril 2023

évolution des mentions légales

Nouveau texte : ”Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous”

✨ feat

footer

#568

v1.8.4 - 15 novembre 2022

correction sur le séparateur bleu du pied de page

fix

footer

#465

v1.8.0 - 27 octobre 2022

bordure bleu inset & logo toujours aligné en haut

fix

footer

#410

v1.7.0 - 21 juillet 2022

fix

footer

header

#353

v1.5.0 - 21 avril 2022

alignement des logos partenaires

fix

footer

#277

v1.4.0 - 16 mars 2022

ajout d'un sample de footer paramétrable

feat

footer

#215

v1.2.0 - 17 novembre 2021

couleur catégorie menu

fix

footer

#131

correction couleur des liens

fix

footer

#129

met a jour le wording du copyright

fix

footer

#87

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github