📁 Accordion - Accordéon
L'accordéon permet d'afficher et de masquer des sections de contenu dans une page
Alert - Alerte
L'alerte affiche un message important et bref sans interrompre la tâche de l'utilisateur
📁 Avatar
L'avatar est une représentation visuelle d'un utilisateur par une image ou ses initiales
Badge
Le badge permet de porter l'attention de l'utilisateur sur un bouton en y associant une information
Banner - Bandeau
Le bandeau est un élément éditorial permettant d’attirer l’attention des usagers sur une information importante et temporaire
📁 Breadcrumb - Fil d'Ariane
Le fil d'ariane est un élément de navigation secondaire qui permet de remonter aux pages parentes de la page active
📁 Button - Bouton
Le bouton permet de déclencher une action ou un évènement
Calendar - Calendrier
Le calendrier permet de sélectionner une date ou une plage de dates
Callout - Mise en avant
La "Mise en avant" permet de faire ressortir visuellement une information importante
Card - Carte
La carte permet de regrouper visuellement du contenu appartenant à un même objet
Card content - Carte éditoriale
La carte permet de rediriger l’usager vers une page éditoriale dont elle donne un aperçu.
Card nav - Carte de navigation
La carte de navigation est conçue pour mettre en avant un ou plusieurs liens
📁 Checkbox - Case à cocher
La checkbox permet de sélectionner une ou plusieurs options
Combobox
Le combobox combine une liste déroulante et un champ de saisie pour rechercher puis sélectionner une ou plusieurs options parmi de nombreuses options possibles
Dialog - Boîte de dialogue
La boîte de dialogue s'ouvre par-dessus la page en cours et permet de concentrer l’attention de l’utilisateur sur une tâche ou une information.
Divider - Séparateur
Le séparateur permet de séparer visuellement deux éléments d'interfaces
📁 Download - téléchargement
Disponibles sous format carte ou de lien, ces composants permettent de télécharger un fichier
Drawer - Tiroir
Le tiroir est un conteneur qui s'ouvre sur le côté de l'écran permettant de visualiser un contenu additionnel.
Dropdown - Liste déroulante
La liste déroulante permet d'afficher plusieurs actions dans un menu
Error message panel - Panneau message d'erreur
Le panneau de message d'erreur est utilisé pour afficher un message d'erreur lorsqu'un problème s'est produit sur le site.
Fieldset - Groupe de champs
Le groupe de champs est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire.
📁 File Upload - Téléversement de fichier(s)
Le téléversement de fichier(s) permet de sélectionner et charger un ou plusieurs fichiers.
📁 Filters - Filtres
Ensemble de composants qui permettent de sélectionner un ou plusieurs critères pour filtrer les données ou le contenu
📁 Footer - Pied de page
Le pied de page propose des éléments d’information sur le site et une navigation secondaire
Graphic element - Element graphique
Les éléments graphiques sont des illustrations à but décoratives
📁 Header - En-tête
L'en-tête permet d'identifier le site et l'organisation et peut contenir la navigation principale ainsi que des actions clés
Icon - Icône
le dsa-icon est un composant utilitaire pour insérer une icône dans l'interface
📁 Input - Champ de saisie
Le champ de saisie est un élément interactif qui permet de saisir ou de modifier du texte ou une valeur numérique.
📁 Menu
Le menu permet d'afficher une liste de liens ou d'actions
Navbar - Barre de navigation
La barre de navigation permet d'accéder aux pages principales et secondaires du site.
Page header - En-tête de page
L'en-tête de page présente les informations principales d’une page et peut contenir des éléments de navigation, de contexte ou des actions
Pagination
La pagination est un système de navigation qui permet de naviguer entre les différentes pages d'un tableau ou d'une liste
📁 Progress - Progression
Le composant progression est un indicateur visuel circulaire ou linéaire qui informe de l'avancement d'un processus en cours
Quote - Citation
La citation est utilisée pour afficher des citations.
📁 Radio
Le composant radio permet de sélectionner un choix unique parmi plusieurs options
Search - Recherche
Le composant recherche permet d'accéder rapidement à un contenu en lançant une recherche sur un mot clé ou une phrase
📁 Select - Champ à liste déroulante
Le champ à liste déroulante permet de sélectionner une ou plusieurs options parmi une liste
📁 Sidenav - Navigation latérale
La navigation latérale permet d'afficher ou de masquer une liste verticale de liens placée à gauche du contenu.
Skeleton loader - Squelette de chargement
Le squelette de chargement permet d'afficher une représentation schématique du contenu avant son chargement
📁 Skiplink - Liens d'accès rapide
Les liens d'accès rapide permettent aux utilisateurs de la navigation clavier d'accéder rapidement à certaines sections de la page
Spinner - Roue de chargement
La roue de chargement permet d'indiquer un processus en cours d'une durée indéterminée
Split panel - Panneau fractionné
Les panneaux fractionnés affichent deux panneaux adjacents dont la répartition peut être modifiée par l'utilisateur
📁 Stepper - Indicateur d'étapes
L'indicateur d'étapes guide l'utilisateur dans l'avancement d'un processus linéaire constitué de plusieurs étapes
Switch - Interrupteur
L'interrupteur permet d'activer ou désactiver une option
📁 Tab - Onglet
Les onglets sont un ensemble de composants qui permettent de structurer du contenu dans un conteneur qui affiche une section à la fois
📁 Table - Tableau
Le tableau permet d'afficher une liste structurée de données textuelles et/ou numériques.
Table of content - Sommaire
Le sommaire permet de naviguer vers les différentes ancres au sein d'une même
Tag - Étiquette
L'étiquette permet de catégoriser, classer, organiser les contenus d’un site à l’aide de mots clés.
Textarea - Zone de texte
La zone de texte permet la saisie de texte long sur plusieurs lignes
Tooltip - Infobulle
L'infobulle s'ouvre par-dessus le reste de la page pour afficher une information supplémentaire relative à un élément de l'interface
📁 Tree - Arborescence
L'arborescence permet d'afficher une liste d'éléments sélectionnables dans une structure hiérarchique