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-942">
    <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">
                        république
                        <br>française
                    </p>
                </a>
            </div>
            <div class="fr-footer__content">
                <p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
                <ul class="fr-footer__content-list">
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="fr-footer__bottom">
            <ul class="fr-footer__bottom-list">
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
                </p>
            </div>
        </div>
    </div>
</footer>

Pied de page avec navigation

<footer class="fr-footer" role="contentinfo" id="footer-945">
    <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">
                        république
                        <br>française
                    </p>
                </a>
            </div>
            <div class="fr-footer__content">
                <p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
                <ul class="fr-footer__content-list">
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="fr-footer__bottom">
            <ul class="fr-footer__bottom-list">
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
                </p>
            </div>
        </div>
    </div>
</footer>

Pied de page avec logo opérateur

<footer class="fr-footer" role="contentinfo" id="footer-948">
    <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 class="fr-footer__brand-link" href="/" title="Retour à l’accueil">
                    <img class="fr-footer__logo fr-responsive-img" 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__content">
                <p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
                <ul class="fr-footer__content-list">
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://gouvernement.fr">gouvernement.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://service-public.fr">service-public.fr</a>
                    </li>
                    <li class="fr-footer__content-item">
                        <a class="fr-footer__content-link" href="https://data.gouv.fr">data.gouv.fr</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="fr-footer__bottom">
            <ul class="fr-footer__bottom-list">
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
                </p>
            </div>
        </div>
    </div>
</footer>

Pied de page avec logos partenaires

<footer class="fr-footer" role="contentinfo" id="footer-951">
    <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">
                        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="../../../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 class="fr-footer__partners-link" href="#">
                                <img class="fr-footer__logo" 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 class="fr-footer__partners-link" href="#">
                                <img class="fr-footer__logo" 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 class="fr-footer__partners-link" href="#">
                                <img class="fr-footer__logo" 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>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fr-footer__bottom">
            <ul class="fr-footer__bottom-list">
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Plan du site</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Accessibilité : non/partiellement/totalement conforme</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Mentions légales</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Données personnelles</a>
                </li>
                <li class="fr-footer__bottom-item">
                    <a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
                </li>
            </ul>
            <div class="fr-footer__bottom-copy">
                <p>Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
                </p>
            </div>
        </div>
    </div>
</footer>

Paramètres d’affichage

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