Le pied de page propose des éléments d’information sur le site et une navigation secondaire pour l’utilisateur afin qu’il poursuive son parcours. Il est modulable selon les besoins et les exigences du site.
Pied de page simple Le pied de page simple est le cas minimal mis à disposition par le DSFR. Il est sur fond blanc en thème claire et sur fond G800 en thème sombre.
Structure Il se compose des éléments suivants:
un bloc marque, voir la charte de marque
un texte de présentation - optionnel.
4 liens de références de l'écosystème institutionnel - obligatoires.
la liste de liens liés aux obligations légales. 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. - obligatoire.
une mention de la licence - obligatoire
1
2
3
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
(...)
Voir le snippet complet de code <>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
<div class="fr-footer__body">
<div class="fr-footer__brand fr-enlarge-link">
<a href="/" title="Retour à l’accueil">
<p class="fr-logo" title="république française">
république
<br>française
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
</li>
</ul>
</div>
</div>
<div class="fr-footer__bottom">
<ul class="fr-footer__bottom-list">
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Plan du site</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Accessibilité: non/partiellement/totalement conforme</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Mentions légales</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Données personnelles</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
</li>
</ul>
<div class="fr-footer__bottom-copy">
<p>Sauf mention contraire, tous les textes de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
</p>
</div>
</div>
</div>
</footer>
Pied de page avec logo opérateur
1
2
3
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
(...)
Voir le snippet complet de code <>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
<div class="fr-footer__body fr-footer__body--operator">
<div class="fr-footer__brand fr-enlarge-link">
<p class="fr-logo" title="république française">
république
<br>française
</p>
<a class="fr-footer__brand-link" href="/" title="Retour à l’accueil">
<!-- L'alternative de l'image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
<img class="fr-footer__logo" src="/img/logo-operator-h.png" alt="[A MODIFIER | text alternatif de l’image]">
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
</li>
</ul>
</div>
</div>
<div class="fr-footer__bottom">
<ul class="fr-footer__bottom-list">
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Plan du site</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Accessibilité: non/partiellement/totalement conforme</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Mentions légales</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Données personnelles</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
</li>
</ul>
<div class="fr-footer__bottom-copy">
<p>Sauf mention contraire, tous les textes de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
</p>
</div>
</div>
</div>
</footer>
Les règles à suivre et les sources pour intégrer le bloc marque sont accessible ici
Pied de page complet Le pied de page complet reprend les éléments du pied de page simple et intègre au-dessus une section présentant des listes de liens.
Il est recommandé de choisir le pied de page complet pour les sites profonds nécessitant de réintégrer des listes de liens en rebond de la navigation.
1
2
3
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-footer__top">
(...)
Voir le snippet complet de code <>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-footer__top">
<div class="fr-container">
<div class="fr-grid-row fr-grid-row--start fr-grid-row--gutters">
<div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
<h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
<ul class="fr-footer__top-list">
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
<h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
<ul class="fr-footer__top-list">
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
<h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
<ul class="fr-footer__top-list">
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
<h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
<ul class="fr-footer__top-list">
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
<h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
<ul class="fr-footer__top-list">
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
</ul>
</div>
<div class="fr-col-12 fr-col-sm-3 fr-col-md-2">
<h3 class="fr-footer__top-cat">Nom de la catégorie</h3>
<ul class="fr-footer__top-list">
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
<li>
<a class="fr-footer__top-link" href="#">Lien de navigation</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="fr-container">
<div class="fr-footer__body">
<div class="fr-footer__brand fr-enlarge-link">
<a href="/" title="Retour à l’accueil">
<p class="fr-logo" title="république française">
république
<br>française
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
</li>
</ul>
</div>
</div>
<div class="fr-footer__bottom">
<ul class="fr-footer__bottom-list">
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Plan du site</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Accessibilité: non/partiellement/totalement conforme</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Mentions légales</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Données personnelles</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
</li>
</ul>
<div class="fr-footer__bottom-copy">
<p>Sauf mention contraire, tous les textes de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
</p>
</div>
</div>
</div>
</footer>
Les listes de liens peuvent être classées par catégorie. Il est possible d’aller au maximum jusqu'à 6 colonnes de liens. Nous recommandons de ne pas dépasser des listes de plus de 8 liens.
Cette liste ne doit pas être le miroir des liens présents dans la navigation principale. Un travail de conception particulier doit être mené pour organiser les liens : ceux-ci peuvent pointer vers les contenus populaires/fonctionnalités phares du site ou les pages susceptibles de répondre aux questions restantes d'un visiteur.
Pied de page avec partenaires Dans ses deux versions le pied de page peut intégrer un bloc partenaires.
1
2
3
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-footer__top">
(...)
Consulter l'intégralité du snippet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<footer class="fr-footer" role="contentinfo" id="">
<div class="fr-container">
<div class="fr-footer__body">
<div class="fr-footer__brand fr-enlarge-link">
<a href="/" title="Retour à l’accueil">
<p class="fr-logo" title="république française">
république
<br>française
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
</li>
</ul>
</div>
</div>
<div class="fr-footer__partners">
<h4 class="fr-footer__partners-title">Nos partenaires</h4>
<div class="fr-footer__partners-logos">
<div class="fr-footer__partners-main">
<a class="footer__partners-link" href="#">
<img class="fr-footer__logo" src="/img/logo-partner-1.png" alt="[A MODIFIER | text alternatif de l’image]">
</a>
</div>
<div class="fr-footer__partners-sub">
<ul>
<li>
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" src="/img/logo-partner-2.png" alt="[A MODIFIER | text alternatif de l’image]">
</a>
</li>
<li>
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" src="/img/logo-partner-3.png" alt="[A MODIFIER | text alternatif de l’image]">
</a>
</li>
<li>
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" src="/img/logo-partner-4.png" alt="[A MODIFIER | text alternatif de l’image]">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="fr-footer__bottom">
<ul class="fr-footer__bottom-list">
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Plan du site</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Accessibilité: non/partiellement/totalement conforme</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Mentions légales</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Données personnelles</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
</li>
</ul>
<div class="fr-footer__bottom-copy">
<p>Sauf mention contraire, tous les textes de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
</p>
</div>
</div>
</div>
</footer>
Le partenaire principal est toujours placé à gauche. Les partenaires secondaires sont placés à droite si associés à un partenaires principal, sinon à gauche.
Règles d’utilisation Usage Le pied de page est présent sur l’ensemble des pages du site. Il est situé en fin de page. Le trait bleu marque la séparation entre le corps de la page et le pied de page.
Les éléments de mise en avant des réseaux sociaux et d’abonnement à la newsletter sont deux composants qui se trouveront au-dessus du footer : formulaire newsletter (à venir) liens réseaux sociaux (à venir)
Accessibilité L'élément footer doit contenir le role aria contentinfo
1
<footer role=”contentinfo”>
“Accessibilité : non conforme ” si le taux de conformité est inférieur à 50% (ou qu’aucun audit n’a été effectué)
“Accessibilité : partiellement conforme ” si le taux de conformité est supérieur à 50%.
“Accessibilité : totalement conforme ” si le taux de conformité est égal à 100%.
Plus d’informations sur https://design.numerique.gouv.fr/accessibilite-numerique/cadre-legal/
Contenu Le texte de présentation optionnel peut être utilisé pour donner des informations sur le service (texte de présentation…) ou l’organisation (contact, adresse…).
Pour les libellés des liens, utiliser des formulations claires et concises. Il faut respecter la distinction des zones :
Les liens liés aux obligations (mentions légales, etc.)
Les liens liés à la sphère gouvernementale
Les liens internes et externes (liste présente en haut de footer, de la version complète du pied de page).
Personnalisation Le style de ce composant n’est pas personnalisable.structure du composant .
Besoin d’aide ? L'équipe du DSFR est là pour vous aider.