Footer générique

Choix de l'univers FT

Footer generic | Pied de page générique

Le pied de page générique est situé au bas de la page, sous le contenu principal et occupe toute la largeur du navigateur. Il fournit notamment un accès aux informations légales et à la déclaration d’accessibilité.

Documentation : Figma

Langage:  HTML 

<footer id="footer" role="contentinfo" class="ds-footer">
    <div class="ds-footer-top">
        <div class="container-fluid">
            <button class="btn btn-reset btn-link" id="button_538286233" type="button">
                <span aria-hidden="true" class="icon icon-arrow-up-round"></span>
                <span class="btn-content">Retour en haut</span>
            </button>
        </div>
    </div>
    <div class="ds-footer-center">
        <div class="container-fluid">
            <div class="ds-footer-wrapper">
                <div>
                    <p class="ds-footer-logo">
                        <img class="ds-footer-logo-img" src="https://cdn-r.ft-qvr.fr/studio/logos/applications/Budi.svg" alt="" width="20" height="20" />
                        <span class="ds-footer-logo-label">Nom de l&#39;application</span>
                    </p>

                    <nav class="ds-footer-nav" role="navigation" aria-label="Navigation secondaire">
                        <ul class="ds-footer-nav-list list-unstyled">

                            <li class="ds-footer-nav-item">
                                <a class="text-link link-ghost" href="#_96325929">À propos</a>
                            </li>

                            <li class="ds-footer-nav-item">
                                <a class="text-link link-ghost" href="#_508736788">Conditions d’utilisation</a>
                            </li>

                            <li class="ds-footer-nav-item">
                                <a class="text-link link-ghost" href="#_677650000">Contact</a>
                            </li>

                            <li class="ds-footer-nav-item">
                                <a class="text-link link-ghost" href="#_637429183">Cookies</a>
                            </li>

                            <li class="ds-footer-nav-item">
                                <a class="text-link link-ghost" href="#_977737063">Qui sommes nous ?</a>
                            </li>

                            <li class="ds-footer-nav-item">
                                <a class="text-link link-ghost" href="#_862127366">Aide</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="ds-footer-actions">

                    <button class="btn btn-tertiary dark btn-ratio-square" id="button_923463248" type="button" data-ft-tooltip="Rechercher" data-ft-vocalize="false">
                        <span aria-hidden="true" class="icon icon-search"></span>
                        <span class="sr-only">Rechercher</span>
                    </button>

                    <button class="btn btn-tertiary dark" id="button_631121951" type="button">
                        <span aria-hidden="true" class="icon icon-user"></span>
                        <span class="btn-content">Lorem ipsum</span>
                    </button>

                </div>

            </div>
        </div>
    </div>

    <div class="ds-footer-bottom">
        <div class="container-fluid">
            <div class="ds-footer-wrapper">
                <ul class="ds-footer-partners-list list-unstyled" aria-label="Liste des partenaires">

                    <li>
                        <img src="https://cdn-r.ft-qvr.fr/studio/logos/partenaires/reseau-pour-emploi/RPE.svg" width="80" height="80" alt="Réseau pour l&#39;emploi" />
                    </li>

                    <li>
                        <img src="https://cdn-r.ft-qvr.fr/studio/logos/marque/Logo_France_Travail_RVB_Horizontal_Coul_Positif.svg" width="128" height="56" alt="France travail" />
                    </li>

                    <li>
                        <img src="https://cdn-r.ft-qvr.fr/studio/logos/partenaires/cap-emploi/CAP-EMPLOI_LOGO-BLOC-rvb.svg" width="100" height="60" alt="Cap emploi" />
                    </li>

                    <li>
                        <img src="https://cdn-r.ft-qvr.fr/studio/logos/partenaires/missions-locales/ML_logo_court_rvb.svg" width="120" height="84" alt="Les missions locales" />
                    </li>

                </ul>
            </div>
        </div>
    </div>

</footer>
ft-autoloader.js