Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

 

Table of Contents
minLevel1
maxLevel2

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.

...

Html macro
<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">
                        république
                        <br>française
                    </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 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>

</div>


</body>
</html>
Html macro
<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">
                        république
                        <br>française
                    </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 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>

</div>


</body>
</html>
<script>
setTimeout(function(){ var html = document.querySelector("html");
html.setAttribute("data-fr-theme","dark"); }, 500);
</script>

...

Expand
titleVoir le snippet complet de code <>
Code Block
languagehtml
<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

Html macro
<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 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>
</body> </html>

Html macro
<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 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>

</body>
</html>
<script>
setTimeout(function(){ var html = document.querySelector("html");
html.setAttribute("data-fr-theme","dark"); }, 500);
</script>
Code Block
languagehtml

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

Expand
titleVoir le snippet complet de code <>
Code Block
languagehtml
<!-- 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 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 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:

  • Le pied de page simple (

voir la structure ci-dessus) - obligatoire

  • une liste de liens - obligatoire

Html live preview
version6
{"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                        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 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 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>\n                </p>\n            </div>\n        </div>\n    </div>\n</footer>\n</div>"}
Html live preview
version8
{"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                        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 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 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>\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>"}

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

Expand
titleVoir le snippet complet de code <>
Code Block
languagehtml
languagehtml
<!-- 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 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>

...

Dans ses deux versions le pied de page peut intégrer un bloc partenaires.

Il se compose des éléments suivants:

  • Le pied de page simple (voir la structure ci-dessus) - obligatoire

  • du bloc partenaire - obligatoire

    • Logo du partenaire principal, ferré à gauche - obligatoire

    • Logos des partenaires additionnels, ferrés à droite - optionnels.

...

Html live preview
version15
{"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 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>\n                </p>\n            </div>\n        </div>\n    </div>\n</footer>\n</div>\n"}
Html live preview
version15
{"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 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>\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>"}

Code Block
languagehtml
<!-- footer avec partenaires -->
<footer class="fr-footer" role="contentinfo" id="footer"">
    <div class="fr-container">
        <div class="fr-footer__topbody">
    (...)

 

Expand
titleConsulter l'intégralité du snippet
Code Block
languagehtml
<!-- 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 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.

...

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.

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) (blue star) , liens réseaux sociaux (à venir) (blue star) .

L'élément footer doit contenir le role aria 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/

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…).

...