Composants
Accordéon
Masquer ou révéler du contenu textuel
Ajout de fichier
Sélection et envoi de fichiers
Alerte
Relayer une information importante
Badge
Affichage d’un statut informatif
Bandeau d'information importante
Afficher une alerte temporaire prioritaire.
Barre de recherche
Accès rapide à un contenu par mot clé
Bloc marque
Élément de la charte graphique de l'État français utilisé pour représenter l'identité visuelle de l'État.
Bouton
Déclenchement d’une action dans l’interface
Bouton FranceConnect
Authentification avec FranceConnect
Bouton radio
Sélection d’une option unique
Carte
Carte cliquable redirigeant vers une page éditoriale avec aperçu.
Case à cocher
Sélection multiple dans une liste
Champ de saisie
Saisie de données dans une interface.
Citation
Citer un texte dans un contenu éditorial.
Contenu médias
Structurer visuellement une page avec des contenus média.
Contrôle segmenté
Sélection de vues avec un contrôle segmenté.
Curseur
Sélection d’une valeur sur une échelle
En-tête
Identification du site et accès rapides
En-tête connectée
Variante de l’En-tête dédiée aux usagers connectés
Fil d'Ariane
Se repérer dans l’arborescence avec le fil d’Ariane.
Formulaire
Gestion de l'agencement des éléments de formulaire.
Gestionnaire de consentement
Gérer le consentement des usagers sur les cookies et données personnelles.
Indicateur d’étapes
Suivi d’un parcours en plusieurs étapes
Infobulle
Afficher une aide contextuelle discrète.
Interrupteur
Basculer entre deux états opposés
Lettre d'information et réseaux sociaux
Inscription à une lettre d’info et accès aux réseaux sociaux.
Lien
Navigation secondaire vers d’autres contenus
Liens d'évitement
Accéder rapidement au contenu avec le clavier.
Liste déroulante
Sélectionner une option dans une liste.
Liste déroulante riche
Composant de sélection multiple enrichi avec fonctions de recherche.
Menu déroulant
Afficher des actions contextuelles sans encombrer l’interface
Menu latéral
Naviguer entre pages liées avec un menu latéral.
Mise en avant
Mettre en valeur une information secondaire.
Mise en exergue
Mettre en évidence une information essentielle.
Modale
Affichage focalisé d’un contenu secondaire
Mot de passe
Saisie ou création de mot de passe, avec affichage masqué et recommandations de sécurité.
Navigation principale
Orienter l’usager dans les sections du site.
Navigation tertiaire
Composant de navigation de 3e niveau en complément du menu latéral
Onglet
Structuration de contenu avec des onglets
Pagination
Navigation entre plusieurs pages d’une liste
Paramètres d'affichage
Choisir le thème clair ou sombre d’un site.
Partage
Partager un contenu via différents canaux
Pied de page
Informations complémentaires en bas de page
Sélecteur de langues
Choisir la langue d’affichage du site.
Sommaire
Navigation entre les sections d’une page
Tableau
Présentation du composant Tableau pour organiser et comparer des données.
Tag
Le tag sert à classer ou filtrer les contenus.
Téléchargement de fichier
Composant obsolète remplacé par les variations des composants carte, lien et tuile.
Transcription
Affichage de texte lié à un contenu média
Tuile
Rediriger l’usager vers du contenu via des tuiles.
Zone d’expression visuelle
Une section riche et impactante pour mettre en avant un message ou une action.
