Footer

Le pied de page institutionnel regroupe les liens légaux, les ressources et les mentions obligatoires (accessibilité, confidentialité, plan du site).

Do / Don’t

✓ Faire

Toujours inclure le lien vers la déclaration d’accessibilité
Dupliquer les liens critiques (contact, accessibilité) déjà présents dans le header

✗ Éviter

Surcharger le footer avec des dizaines de liens peu utilisés
Utiliser le footer comme seule navigation vers des pages importantes

Structure : tds-footer__top (marque + groupes de liens) séparé par une bordure de tds-footer__bottom (copyright + liens légaux). Fond neutral.900, texte clair.

Importation

@import "@tds-tchad/core/components/footer/footer.css";

import { footer } from '@tds-tchad/core/components/footer';

Exemple

<footer class="tds-footer">
  <div class="tds-footer__top">
    <div class="tds-footer__brand">
      <img src="/brand/tds-logo-official.png" alt="Tchad Design System" class="tds-footer__logo" />
    </div>
    <nav class="tds-footer__nav" aria-label="Liens du pied de page">
      <div class="tds-footer__nav-group">
        <div class="tds-footer__nav-title">Ressources</div>
        <a href="/docs" class="tds-footer__link">Documentation</a>
        <a href="https://github.com/wargafu/TDS" class="tds-footer__link">GitHub</a>
      </div>
      <div class="tds-footer__nav-group">
        <div class="tds-footer__nav-title">Légal</div>
        <a href="/mentions-legales" class="tds-footer__link">Mentions légales</a>
        <a href="/accessibilite" class="tds-footer__link">Déclaration d'accessibilité</a>
      </div>
    </nav>
  </div>
  <div class="tds-footer__bottom">
    <span>© 2026 République du Tchad</span>
    <div class="tds-footer__legal">
      <a href="/confidentialite" class="tds-footer__link">Confidentialité</a>
      <a href="/plan-du-site" class="tds-footer__link">Plan du site</a>
    </div>
  </div>
</footer>