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<footer class="fr-footer" role="contentinfo" id="footer-1156">
<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">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a 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" 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>
<footer class="fr-footer" role="contentinfo" id="footer-1159">
<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">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a 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" 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>
<footer class="fr-footer" role="contentinfo" id="footer-1162">
<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" style="max-width:12.5rem" 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" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a 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" 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>
<footer class="fr-footer" role="contentinfo" id="footer-1165">
<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">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a 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 class="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 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 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 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" 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>
<footer class="fr-footer" role="contentinfo" id="footer-1168">
<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">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
<a class="fr-footer__brand-link" href="/" title="Retour à l’accueil">
<img class="fr-footer__logo" style="max-width:12.5rem" 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" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a 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 class="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 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 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 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" 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>