Retour

Pied de page (footer)

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.

Documentation

Pied de page minimal

<footer class="fr-footer" role="contentinfo" id="footer-5852">
    <div class="fr-container">
        <div class="fr-footer__body">
            <div class="fr-footer__brand fr-enlarge-link">
                <a id="footer-operator" href="/" title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
                    <p class="fr-logo">
                        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 id="footer__content-link-5853" class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5854" class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5855" class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5856" class="fr-footer__content-link" target="_blank" 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" id="footer__bottom-link-5857" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5858" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5859" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5860" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5861" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés 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 navigation

<footer class="fr-footer" role="contentinfo" id="footer-5909">
    <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 id="footer__top-link-5910" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5911" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5912" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5913" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5914" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5915" 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 id="footer__top-link-5916" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5917" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5918" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5919" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5920" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5921" 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 id="footer__top-link-5922" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5923" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5924" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5925" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5926" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5927" 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 id="footer__top-link-5928" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5929" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5930" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5931" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5932" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5933" 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 id="footer__top-link-5934" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5935" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5936" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5937" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5938" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5939" 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 id="footer__top-link-5940" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5941" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5942" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5943" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5944" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-5945" 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 id="footer-operator" href="/" title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
                    <p class="fr-logo">
                        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 id="footer__content-link-5946" class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5947" class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5948" class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5949" class="fr-footer__content-link" target="_blank" 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" id="footer__bottom-link-5950" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5951" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5952" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5953" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5954" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés 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

<footer class="fr-footer" role="contentinfo" id="footer-5966">
    <div class="fr-container">
        <div class="fr-footer__body">
            <div class="fr-footer__brand fr-enlarge-link">
                <p class="fr-logo">
                    République
                    <br>Française
                </p>
                <a id="footer-brand" class="fr-footer__brand-link" href="/" title="Retour à l’accueil du site - [À MODIFIER - texte alternatif de l’image : nom de l&#39;opérateur ou du site serviciel] - République Française">
                    <img class="fr-footer__logo" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans 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 id="footer__content-link-5967" class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5968" class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5969" class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5970" class="fr-footer__content-link" target="_blank" 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" id="footer__bottom-link-5971" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5972" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5973" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5974" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-5975" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés 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 logos partenaires

<footer class="fr-footer" role="contentinfo" id="footer-5991">
    <div class="fr-container">
        <div class="fr-footer__body">
            <div class="fr-footer__brand fr-enlarge-link">
                <a id="footer-operator" href="/" title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
                    <p class="fr-logo">
                        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 id="footer__content-link-5992" class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5993" class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5994" class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-5995" class="fr-footer__content-link" target="_blank" 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 id="footer__partners-link-5996" class="fr-footer__partners-link" href="">
                        <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                        <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                    </a>
                </div>
                <div class="fr-footer__partners-sub">
                    <ul>
                        <li>
                            <a id="footer__subpartners-link-5997" class="fr-footer__partners-link" href="">
                                <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                            </a>
                        </li>
                        <li>
                            <a id="footer__subpartners-link-5998" class="fr-footer__partners-link" href="">
                                <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                            </a>
                        </li>
                        <li>
                            <a id="footer__subpartners-link-5999" class="fr-footer__partners-link" href="">
                                <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans 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" id="footer__bottom-link-6000" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6001" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6002" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6003" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6004" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés 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 complet

<footer class="fr-footer" role="contentinfo" id="footer-6056">
    <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 id="footer__top-link-6057" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6058" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6059" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6060" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6061" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6062" 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 id="footer__top-link-6063" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6064" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6065" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6066" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6067" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6068" 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 id="footer__top-link-6069" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6070" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6071" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6072" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6073" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6074" 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 id="footer__top-link-6075" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6076" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6077" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6078" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6079" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6080" 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 id="footer__top-link-6081" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6082" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6083" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6084" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6085" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6086" 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 id="footer__top-link-6087" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6088" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6089" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6090" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6091" class="fr-footer__top-link" href="../">Lien de navigation</a>
                        </li>
                        <li>
                            <a id="footer__top-link-6092" 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">
                <p class="fr-logo">
                    République
                    <br>Française
                </p>
                <a id="footer-brand" class="fr-footer__brand-link" href="/" title="Retour à l’accueil du site - [À MODIFIER - texte alternatif de l’image : nom de l&#39;opérateur ou du site serviciel] - République Française">
                    <img class="fr-footer__logo" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans 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 id="footer__content-link-6093" class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-6094" class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-6095" class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a id="footer__content-link-6096" class="fr-footer__content-link" target="_blank" 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 id="footer__partners-link-6097" class="fr-footer__partners-link" href="">
                        <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                        <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                    </a>
                </div>
                <div class="fr-footer__partners-sub">
                    <ul>
                        <li>
                            <a id="footer__subpartners-link-6098" class="fr-footer__partners-link" href="">
                                <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                            </a>
                        </li>
                        <li>
                            <a id="footer__subpartners-link-6099" class="fr-footer__partners-link" href="">
                                <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
                            </a>
                        </li>
                        <li>
                            <a id="footer__subpartners-link-6100" class="fr-footer__partners-link" href="">
                                <img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
                                <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans 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" id="footer__bottom-link-6101" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6102" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6103" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6104" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" id="footer__bottom-link-6105" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés 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>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.