DSBJ - Design Système du Bénin

Composant Vue BjFooter

Le composant BjFooter n’expose que la structure bj-footer, bj-footer__top (slot top optionnel) et bj-footer__bottom (slot bottom + défaut). Les colonnes de liens utilisent bj-footer__list et bj-footer__link ; il n’existe pas de classes bj-footer__brand ou bj-footer__links dans le DS.

Footer minimal

Version la plus simple : uniquement les liens légaux obligatoires et la mention de copyright. Idéal pour les applications internes ou les pages simples.

<footer class="bj-footer" role="contentinfo">
  <div class="bj-container">
    <div class="bj-footer__bottom">
      <ul class="bj-footer__bottom-list">
        <li><a class="bj-footer__bottom-link" href="/mentions-legales">Mentions légales</a></li>
        <li><a class="bj-footer__bottom-link" href="/donnees-personnelles">Données personnelles</a></li>
        <li><a class="bj-footer__bottom-link" href="/accessibilite">Accessibilité</a></li>
      </ul>
      <p class="bj-footer__copy">République du Bénin</p>
    </div>
  </div>
</footer>

Footer avec 2 colonnes

Ajout de la zone supérieure avec deux colonnes de liens de navigation. La grille passe d'une colonne sur mobile à deux colonnes sur tablette.

<footer class="bj-footer" role="contentinfo">
  <div class="bj-container">
    <div class="bj-footer__top">
      <div class="bj-footer__top-row">
        <div>
          <p class="bj-footer__col-title">Service</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/contact">Contact</a>
            <a class="bj-footer__link" href="/faq">FAQ</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Informations</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/accessibilite">Accessibilité</a>
            <a class="bj-footer__link" href="/donnees-personnelles">Données personnelles</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bj-footer__bottom">
      <ul class="bj-footer__bottom-list">
        <li><a class="bj-footer__bottom-link" href="/mentions-legales">Mentions légales</a></li>
        <li><a class="bj-footer__bottom-link" href="/plan-du-site">Plan du site</a></li>
      </ul>
      <p class="bj-footer__copy">République du Bénin</p>
    </div>
  </div>
</footer>

Footer avec 4 colonnes

Grille complète à quatre colonnes pour les portails riches en contenus. Passe à 2 colonnes sur tablette et 1 colonne sur mobile.

<footer class="bj-footer" role="contentinfo">
  <div class="bj-container">
    <div class="bj-footer__top">
      <div class="bj-footer__top-row">
        <div>
          <p class="bj-footer__col-title">À propos</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="#">Qui sommes-nous</a>
            <a class="bj-footer__link" href="#">Organisation</a>
            <a class="bj-footer__link" href="#">Rapports annuels</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Services</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="#">Démarches en ligne</a>
            <a class="bj-footer__link" href="#">Formulaires</a>
            <a class="bj-footer__link" href="#">Rendez-vous</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Aide</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="#">FAQ</a>
            <a class="bj-footer__link" href="#">Guides</a>
            <a class="bj-footer__link" href="#">Contact</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Suivez-nous</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="#">Facebook</a>
            <a class="bj-footer__link" href="#">Twitter / X</a>
            <a class="bj-footer__link" href="#">YouTube</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bj-footer__bottom">
      <ul class="bj-footer__bottom-list">
        <li><a class="bj-footer__bottom-link" href="/mentions-legales">Mentions légales</a></li>
        <li><a class="bj-footer__bottom-link" href="/donnees-personnelles">Données personnelles</a></li>
        <li><a class="bj-footer__bottom-link" href="/accessibilite">Accessibilité</a></li>
        <li><a class="bj-footer__bottom-link" href="/plan-du-site">Plan du site</a></li>
      </ul>
      <p class="bj-footer__copy">République du Bénin - contenus sous licence étatique</p>
    </div>
  </div>
</footer>

Footer avec partenaires

Le bloc partenaires est optionnel. Il s'insère entre les colonnes de liens et la barre inférieure. Les logos sont centrés et redimensionnés à 3 rem de hauteur.

<footer class="bj-footer" role="contentinfo">
  <div class="bj-container">
    <div class="bj-footer__top">
      <div class="bj-footer__top-row">
        <div>
          <p class="bj-footer__col-title">Service</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/contact">Contact</a>
            <a class="bj-footer__link" href="/faq">FAQ</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Informations</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/accessibilite">Accessibilité</a>
            <a class="bj-footer__link" href="/donnees-personnelles">Données personnelles</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bj-footer__partners">
      <p class="bj-footer__partners-title">Nos partenaires</p>
      <div class="bj-footer__partners-logos">
        <img src="/logos/partenaire-1.svg" alt="Ministère de l'Économie" height="48">
        <img src="/logos/partenaire-2.svg" alt="Agence nationale du numérique" height="48">
        <img src="/logos/partenaire-3.svg" alt="Union européenne" height="48">
      </div>
    </div>
    <div class="bj-footer__bottom">
      <ul class="bj-footer__bottom-list">
        <li><a class="bj-footer__bottom-link" href="/mentions-legales">Mentions légales</a></li>
        <li><a class="bj-footer__bottom-link" href="/plan-du-site">Plan du site</a></li>
      </ul>
      <p class="bj-footer__copy">République du Bénin</p>
    </div>
  </div>
</footer>

Footer complet

Combinaison de toutes les sections : 4 colonnes de liens, bloc partenaires et barre inférieure avec liens légaux détaillés. Convient aux portails institutionnels majeurs.

<footer class="bj-footer" role="contentinfo">
  <div class="bj-container">
    <div class="bj-footer__top">
      <div class="bj-footer__top-row">
        <div>
          <p class="bj-footer__col-title">À propos</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/a-propos">Qui sommes-nous</a>
            <a class="bj-footer__link" href="/organisation">Organisation</a>
            <a class="bj-footer__link" href="/rapports">Rapports annuels</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Services</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/demarches">Démarches en ligne</a>
            <a class="bj-footer__link" href="/formulaires">Formulaires</a>
            <a class="bj-footer__link" href="/rdv">Rendez-vous</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Aide</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="/faq">FAQ</a>
            <a class="bj-footer__link" href="/guides">Guides</a>
            <a class="bj-footer__link" href="/contact">Contact</a>
          </div>
        </div>
        <div>
          <p class="bj-footer__col-title">Suivez-nous</p>
          <div class="bj-footer__list">
            <a class="bj-footer__link" href="https://facebook.com">Facebook</a>
            <a class="bj-footer__link" href="https://x.com">Twitter / X</a>
            <a class="bj-footer__link" href="https://youtube.com">YouTube</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bj-footer__partners">
      <p class="bj-footer__partners-title">Nos partenaires</p>
      <div class="bj-footer__partners-logos">
        <img src="/logos/partenaire-1.svg" alt="Ministère de l'Économie" height="48">
        <img src="/logos/partenaire-2.svg" alt="Agence nationale du numérique" height="48">
        <img src="/logos/partenaire-3.svg" alt="Union européenne" height="48">
      </div>
    </div>
    <div class="bj-footer__bottom">
      <ul class="bj-footer__bottom-list">
        <li><a class="bj-footer__bottom-link" href="/mentions-legales">Mentions légales</a></li>
        <li><a class="bj-footer__bottom-link" href="/donnees-personnelles">Données personnelles</a></li>
        <li><a class="bj-footer__bottom-link" href="/accessibilite">Accessibilité : partiellement conforme</a></li>
        <li><a class="bj-footer__bottom-link" href="/plan-du-site">Plan du site</a></li>
      </ul>
      <p class="bj-footer__copy">République du Bénin - contenus sous licence étatique</p>
    </div>
  </div>
</footer>

Classes CSS

Classe	Description
`bj-footer`	Conteneur principal du pied de page. Affiche la bande tricolore via ::after.
`bj-footer__top`	Zone supérieure contenant les colonnes de liens. Séparée par une bordure basse.
`bj-footer__top-row`	Grille responsive des colonnes (1 col mobile, 2 col tablette, 4 col desktop).
`bj-footer__col-title`	Titre de colonne en majuscules avec graisse bold.
`bj-footer__list`	Liste verticale de liens dans une colonne.
`bj-footer__link`	Lien de navigation dans une colonne. Change de couleur au survol.
`bj-footer__partners`	Bloc optionnel pour les logos des partenaires. Séparé par une bordure basse.
`bj-footer__partners-title`	Titre centré du bloc partenaires.
`bj-footer__partners-logos`	Conteneur flex centré pour les logos (images hauteur 3rem).
`bj-footer__bottom`	Barre inférieure avec liens légaux et copyright.
`bj-footer__bottom-list`	Liste flex des liens légaux, centrée et avec retour à la ligne.
`bj-footer__bottom-link`	Lien légal en taille xs.
`bj-footer__copy`	Mention de copyright centrée.

Pied de page