Composants
Bibliothèque de 41 composants HTML/CSS du Design Système du Bénin : navigation, formulaires, contenu, éléments interactifs et blocs réglementaires. Chaque fiche détaille les variantes, les classes et les bonnes pratiques d’accessibilité.
Navigation
Header
En-tête institutionnel avec marque, service et menu principal.
Footer
Pied de page avec liens et mentions légales.
Navigation
Menus et listes de liens de navigation.
Breadcrumb
Fil d’Ariane pour situer la page dans l’arborescence.
Sidemenu
Menu latéral pour sous-sections et pages liées.
Skiplink
Lien d’évitement vers le contenu principal.
Pagination
Parcours de listes paginées.
Sommaire
Sommaire de page ou d’article avec ancres.
Base
République
du Bénin
Logo
Signature République du Bénin avec bande tricolore.
Bouton
Bouton
Actions primaires, secondaires et tertiaires.
Lien
Lien
Liens de texte, tailles et liens externes.
Nouveau
Badge
Pastilles de statut et d’étiquette courte.
Tag
Tag
Étiquettes cliquables, filtres et listes de tags.
Formulaires
Champ de saisie
Champs texte, zones et états de validation.
Liste déroulante
Sélecteur natif stylé.
Case à cocher
Choix multiples et cases indéterminées.
Bouton radio
Choix exclusif dans un groupe.
Interrupteur
Activation binaire on/off.
Téléversement
Envoi de fichiers et pièces jointes.
Recherche
Champ et bouton de recherche.
Sélecteur de date
Calendrier intégré au format jj/mm/aaaa.
Contenu
Alerte
Messages contextuels dans le flux de page.
Bandeau
Annonces en tête de page ou de section.
Mise en avant
Bloc d’information ou d’appel à l’action.
Mise en exergue
Paragraphe ou extrait mis en valeur.
Citation
Citation avec auteur et source.
Carte
Cartes média, liens et grilles de cartes.
Tuile
Accès rapide avec icône ou image.
Tableau
Tableaux de données accessibles.
Contenu éditorial
Typographie et blocs pour articles et pages.
Bannière
Section hero avec image de fond, titre et appel à l'action.
Interactifs
Accordéon
Sections repliables.
Onglet
Panneaux accessibles par onglets.
Modale
Fenêtres dialog et focus piégé.
Infobulle
Aide contextuelle au survol ou au focus.
Indicateur d’étapes
Parcours multi-étapes et formulaires.
Notification toast
Messages éphémères de confirmation ou d'alerte.
Menu déroulant
Menu contextuel d'actions déclenché par un bouton.
Bandeau défilant
Annonces en défilement continu avec pause.
Galerie d'images
Grille d'images avec visionneuse plein écran.
Bulle de chat
Bulle de message pour conversations.
Tiroir
Panneau latéral glissant depuis le bord de l'écran.