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:

<html>
<head>
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">
<style type="text/css">
  .rf-body a, .rf-body a:hover {
    color: inherit;
    text-decoration: none;
  }
  .rf-body ul, .rf-body ol {
    list-style-type: none;
  }
  .rf-card, .rf-tile {
    height: auto;
  }
</style>
</head>
<body>

<div class="rf-body" style="padding: 20px;zoom:0.6;">
<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">
                        Intitulé<br>
                        officiel
                    </p>
                </a>
            </div>
            <div class="fr-footer__content">
                <p class="fr-footer__content-desc">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est.</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 contenus 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>

</div>


</body>
</html>
<html>
<head>
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">
<style type="text/css">
  .rf-body a, .rf-body a:hover {
    color: inherit;
    text-decoration: none;
  }
  .rf-body ul, .rf-body ol {
    list-style-type: none;
  }
  .rf-card, .rf-tile {
    height: auto;
  }
</style>
</head>
<body>

<div class="rf-body" style="padding: 20px;zoom:0.6;">
<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">
                        Intitulé<br>
                        officiel
                    </p>
                </a>
            </div>
            <div class="fr-footer__content">
                <p class="fr-footer__content-desc">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est.</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 contenus 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>

</div>


</body>
</html>
<script>
setTimeout(function(){ var html = document.querySelector("html");
html.setAttribute("data-fr-theme","dark"); }, 500);
</script>
<footer class="fr-footer" role="contentinfo" id="footer">
    <div class="fr-container">
       (...)
<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">
                        Intitulé<br>
                        officiel
                    </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 contenus 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

<html>
<head>
<link href="https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css" rel="stylesheet">
<style type="text/css">
  .rf-body a, .rf-body a:hover {
    color: inherit;
    text-decoration: none;
  }
  .rf-body ul, .rf-body ol {
    list-style-type: none;
  }
  .rf-card, .rf-tile {
    height: auto;
  }
</style>
</head>
<body>

<div class="rf-body" style="padding: 20px">
<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="https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.1x1.svg" alt="[A MODIFIER | text alternatif de l’image]">
                </a>
            </div>
            <div class="fr-footer__content">
                <p class="fr-footer__content-desc">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est.</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 contenus 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>

</body>
</html>

<!-- footer avec logo opérateur -->
<footer class="fr-footer" role="contentinfo" id="footer">
    <div class="fr-container">
    (...)

<!-- pied de page avec logo opérateur -->
<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 contenus 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 (blue star).

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.

Il se compose des éléments suivants:

voir la structure ci-dessus) - obligatoire

{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n<style type=\"text/css\">\n  .fr-body a, .fr-body a:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n  .fr-body ul, .fr-body ol {\n    list-style-type: none;\n  }\n  .fr-card, fr-tile {\n    height: auto;\n  }\n</style>\n<div class=\"fr-body\">\n<footer class=\"fr-footer\" role=\"contentinfo\" id=\"footer\">\n    <div class=\"fr-footer__top\">\n        <div class=\"fr-container\">\n            <div class=\"fr-grid-row fr-grid-row--start fr-grid-row--gutters\">\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"fr-container\">\n        <div class=\"fr-footer__body\">\n            <div class=\"fr-footer__brand fr-enlarge-link\">\n                <a href=\"/\" title=\"Retour à l’accueil\">\n                    <p class=\"fr-logo\" title=\"république française\">\n                        Intitulé<br>\n                        officiel\n                    </p>\n                </a>\n            </div>\n            <div class=\"fr-footer__content\">\n                <p class=\"fr-footer__content-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est.</p>\n                <ul class=\"fr-footer__content-list\">\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://legifrance.gouv.fr\">legifrance.gouv.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://gouvernement.fr\">gouvernement.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://service-public.fr\">service-public.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://data.gouv.fr\">data.gouv.fr</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"fr-footer__bottom\">\n            <ul class=\"fr-footer__bottom-list\">\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Plan du site</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Accessibilité: non/partiellement/totalement conforme</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Mentions légales</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Données personnelles</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Gestion des cookies</a>\n                </li>\n            </ul>\n            <div class=\"fr-footer__bottom-copy\">\n                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href=\"https://github.com/etalab/licence-ouverte/blob/master/LO.md\" target=\"_blank\">licence etalab-2.0</a>\n                </p>\n            </div>\n        </div>\n    </div>\n</footer>\n</div>"}
{"htmlCode":"<link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n<style type=\"text/css\">\n  .fr-body a, .fr-body a:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n  .fr-body ul, .fr-body ol {\n    list-style-type: none;\n  }\n  .fr-card, fr-tile {\n    height: auto;\n  }\n.fr-footer h3{\n   color:rgb(240,240,240)!important;\n}\n</style>\n<div class=\"fr-body\">\n<footer class=\"fr-footer\" role=\"contentinfo\" id=\"footer\">\n    <div class=\"fr-footer__top\">\n        <div class=\"fr-container\">\n            <div class=\"fr-grid-row fr-grid-row--start fr-grid-row--gutters\">\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"fr-col-12 fr-col-sm-3 fr-col-md-2\">\n                    <h3 class=\"fr-footer__top-cat\">Nom de la catégorie</h3>\n                    <ul class=\"fr-footer__top-list\">\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__top-link\" href=\"#\">Lien de navigation</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"fr-container\">\n        <div class=\"fr-footer__body\">\n            <div class=\"fr-footer__brand fr-enlarge-link\">\n                <a href=\"/\" title=\"Retour à l’accueil\">\n                    <p class=\"fr-logo\" title=\"république française\">\n                        Intitulé<br>\n                        officiel\n                    </p>\n                </a>\n            </div>\n            <div class=\"fr-footer__content\">\n                <p class=\"fr-footer__content-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est.</p>\n                <ul class=\"fr-footer__content-list\">\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://legifrance.gouv.fr\">legifrance.gouv.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://gouvernement.fr\">gouvernement.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://service-public.fr\">service-public.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://data.gouv.fr\">data.gouv.fr</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"fr-footer__bottom\">\n            <ul class=\"fr-footer__bottom-list\">\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Plan du site</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Accessibilité: non/partiellement/totalement conforme</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Mentions légales</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Données personnelles</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Gestion des cookies</a>\n                </li>\n            </ul>\n            <div class=\"fr-footer__bottom-copy\">\n                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href=\"https://github.com/etalab/licence-ouverte/blob/master/LO.md\" target=\"_blank\">licence etalab-2.0</a>\n                </p>\n            </div>\n        </div>\n    </div>\n</footer>\n</div>\n<script>\nsetTimeout(function(){ var html = document.querySelector(\"html\");\nhtml.setAttribute(\"data-fr-theme\",\"dark\"); }, 500);\n</script>"}

<!-- footer avec liste de liens -->
<footer class="fr-footer" role="contentinfo" id="footer">
    <div class="fr-footer__top">
    (...)

<!-- footer avec liste de liens -->
<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 contenus 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.

Il se compose des éléments suivants:

{"htmlCode":"<link href=\"https://gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n<style type=\"text/css\">\n  .fr-body a, .fr-body a:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n  .fr-body ul, .fr-body ol {\n    list-style-type: none;\n  }\n  .fr-card, .fr-tile {\n    height: auto;\n  }\n.fr-footer h4{\n   color:rgb(240,240,240)!important;\n}\n</style>\n<div class=\"fr-body\">\n<footer class=\"fr-footer\" role=\"contentinfo\" id=\"\">\n    <div class=\"fr-container\">\n        <div class=\"fr-footer__body\">\n            <div class=\"fr-footer__brand fr-enlarge-link\">\n                <a href=\"/\" title=\"Retour à l’accueil\">\n                    <p class=\"fr-logo\" title=\"république française\">\n                        république\n                        <br>française\n                    </p>\n                </a>\n            </div>\n            <div class=\"fr-footer__content\">\n                <p class=\"fr-footer__content-desc\">Lorem [...] elit ut.</p>\n                <ul class=\"fr-footer__content-list\">\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://legifrance.gouv.fr\">legifrance.gouv.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://gouvernement.fr\">gouvernement.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://service-public.fr\">service-public.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://data.gouv.fr\">data.gouv.fr</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"fr-footer__partners\">\n            <h4 class=\"fr-footer__partners-title\">Nos partenaires</h4>\n            <div class=\"fr-footer__partners-logos\">\n                <div class=\"fr-footer__partners-main\">\n                    <a class=\"footer__partners-link\" href=\"#\">\n                        <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                    </a>\n                </div>\n                <div class=\"fr-footer__partners-sub\">\n                    <ul>\n                        <li>\n                            <a class=\"fr-footer__partners-link\" href=\"#\">\n                                <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                            </a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__partners-link\" href=\"#\">\n                                <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                            </a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__partners-link\" href=\"#\">\n                                <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n        <div class=\"fr-footer__bottom\">\n            <ul class=\"fr-footer__bottom-list\">\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Plan du site</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Accessibilité: non/partiellement/totalement conforme</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Mentions légales</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Données personnelles</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Gestion des cookies</a>\n                </li>\n            </ul>\n            <div class=\"fr-footer__bottom-copy\">\n                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href=\"https://github.com/etalab/licence-ouverte/blob/master/LO.md\" target=\"_blank\">licence etalab-2.0</a>\n                </p>\n            </div>\n        </div>\n    </div>\n</footer>\n</div>\n"}
{"htmlCode":"<link href=\"https://gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n<style type=\"text/css\">\n  .fr-body a, .fr-body a:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n  .fr-body ul, .fr-body ol {\n    list-style-type: none;\n  }\n  .fr-card, .fr-tile {\n    height: auto;\n  }\n.fr-footer h4{\n   color:rgb(240,240,240)!important;\n}\n</style>\n<div class=\"fr-body\">\n<footer class=\"fr-footer\" role=\"contentinfo\" id=\"\">\n    <div class=\"fr-container\">\n        <div class=\"fr-footer__body\">\n            <div class=\"fr-footer__brand fr-enlarge-link\">\n                <a href=\"/\" title=\"Retour à l’accueil\">\n                    <p class=\"fr-logo\" title=\"république française\">\n                        république\n                        <br>française\n                    </p>\n                </a>\n            </div>\n            <div class=\"fr-footer__content\">\n                <p class=\"fr-footer__content-desc\">Lorem [...] elit ut.</p>\n                <ul class=\"fr-footer__content-list\">\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://legifrance.gouv.fr\">legifrance.gouv.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://gouvernement.fr\">gouvernement.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://service-public.fr\">service-public.fr</a>\n                    </li>\n                    <li class=\"fr-footer__content-item\">\n                        <a class=\"fr-footer__content-link\" href=\"https://data.gouv.fr\">data.gouv.fr</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"fr-footer__partners\">\n            <h4 class=\"fr-footer__partners-title\">Nos partenaires</h4>\n            <div class=\"fr-footer__partners-logos\">\n                <div class=\"fr-footer__partners-main\">\n                    <a class=\"footer__partners-link\" href=\"#\">\n                        <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                    </a>\n                </div>\n                <div class=\"fr-footer__partners-sub\">\n                    <ul>\n                        <li>\n                            <a class=\"fr-footer__partners-link\" href=\"#\">\n                                <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                            </a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__partners-link\" href=\"#\">\n                                <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                            </a>\n                        </li>\n                        <li>\n                            <a class=\"fr-footer__partners-link\" href=\"#\">\n                                <img class=\"fr-footer__logo\" src=\"https://www.gouvernement.fr/sites/default/files/static_assets/placeholder.16x9.svg\" alt=\"[A MODIFIER | text alternatif de l’image]\">\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n        <div class=\"fr-footer__bottom\">\n            <ul class=\"fr-footer__bottom-list\">\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Plan du site</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Accessibilité: non/partiellement/totalement conforme</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Mentions légales</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Données personnelles</a>\n                </li>\n                <li class=\"fr-footer__bottom-item\">\n                    <a class=\"fr-footer__bottom-link\" href=\"#\">Gestion des cookies</a>\n                </li>\n            </ul>\n            <div class=\"fr-footer__bottom-copy\">\n                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href=\"https://github.com/etalab/licence-ouverte/blob/master/LO.md\" target=\"_blank\">licence etalab-2.0</a>\n                </p>\n            </div>\n        </div>\n    </div>\n</footer>\n</div>\n<script>\nsetTimeout(function(){ var html = document.querySelector(\"html\");\nhtml.setAttribute(\"data-fr-theme\",\"dark\"); }, 500);\n</script>"}

<!-- footer avec partenaires -->
<footer class="fr-footer" role="contentinfo" id="">
    <div class="fr-container">
        <div class="fr-footer__body">
    (...)

 

<!-- footer avec partenaires -->
<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 contenus 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.


Lettre d’information et réseaux Sociaux

Les composant d’inscription à la newsletter et de la mise en avant des liens vers les réseaux sociaux doit se trouver juste au dessus du footer sur les pages utilisant ces composants :
Voir la documentation Lettre d’information et réseaux sociaux.

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.

Accessibilité

L'élément footer doit contenir le role aria contentinfo

<footer role=”contentinfo”>


La mention de conformité (ou non) au RGAA doit apparaître sur toutes les pages. Le lien vers la déclaration d’accessibilité du site doit être libellé de la façon suivante :

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 :

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

note

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :