Versions Compared

Key

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

...

  • un bloc marque, voir la charte de marque (blue star) - obligatoire.

  • un texte de présentation - optionnel.

  • 4 liens de références de l'écosystème institutionnel - obligatoires.

  • la liste de liens liés aux obligations légales. Cette liste doit être définie en fonction du site, toutefois les liens & contenus suivants sont obligatoires : “accessibilité : non/partiellement/totalement conforme”, mentions légales, données personnelles et gestion des cookies. - obligatoire.

  • une mention de la licence - obligatoire

    • “Sauf mention contraire, tous les textes contenus de ce site sont sous licence etalab-2.0

...

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 textescontenus 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>

...

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 textescontenus 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>

...

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

...

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 textescontenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
                </p>
            </div>
        </div>
    </div>
</footer>

...

Les 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.

...

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