Composantes
Étiquettes
Dans cette page :
L’étiquette est un élément interactif permettant d’indiquer une sélection ou de mettre en évidence un lien.
Quand l’utiliser
La composante est principalement utilisée dans deux contextes:
Premièrement, elle peut être utilisée dans un contexte de recherche et de filtre.
Par exemple :
- Dans une page de recherche, une étiquette s’affiche dès qu’un filtre est sélectionné.
- Dans une Liste déroulante de type sélection multiple, une ou plusieurs étiquettes affichent une ou
plusieurs options sélectionnées. - Dans une liste de résultats ou d’articles qui sont classés en catégories, les étiquettes affichent le nom des
catégories.
Exemple
Deuxièmement, la composante peut aussi être aussi utilisée comme un ajout à la navigation. L’étiquette agit comme lien rapide vers des pages de contenu.
La fiche Les plus consultés contient toutes les informations sur la façon de l'utiliser dans ce contexte.
Comment l’utiliser
Les libellés sont clairs et concis. Il ne faut pas dépasser 40 caractères pour les libellés.
S’il n’est pas possible de respecter la longueur maximale du texte ou si l’espace réservé est restreint (par exemple, au format mobile), le contenu de l’étiquette peut être affiché sur deux lignes maximum.
Exemple
Pour l’utiliser dans un contexte de recherche et de filtre, l’étiquette est accompagnée de l’icône « X » qui permet à l’utilisateur de retirer le filtre de sa recherche. L’étiquette doit être suffisamment visible pour que l’utilisateur comprenne qu’un filtre est appliqué à sa recherche.
Pour l’utiliser comme lien dans un contexte de navigation, les informations nécessaires se trouvent dans la fiche Les plus consultés.
Informations techniques
La hauteur et la largeur de l’étiquette sont variables et dépendent de leur libellé. La hauteur minimale qu’une étiquette doit avoir est de 40 px. La largeur minimale est de 56 px. La hauteur maximale est de 60 px, ce qui correspond à un libellé sur deux lignes, incluant les marges.
Il faut respecter la marge intérieure entre le libellé et l’étiquette qui est de 8 px à gauche et à droite et de 10 px en haut et en bas.
Le dégagement entre l’icône « X » et le bord de l’étiquette est de 8 px. Il est le même entre le libellé et l’icône.
L’icône « X » est de 12 px, horizontalement et verticalement.
Lorsqu’il y a plusieurs étiquettes les unes à côté des autres, l’espacement horizontal et vertical entre chacune est de 8 px.
États
Exemple
CSS de l’étiquette
background-color: #DAE6F0
Libellé de l’étiquette
font -family: Open Sans
font-weight: semibold
font-size: 14px
line-spacing: 20px
font-color: #095797
CSS de l’étiquette en survol
border: 1px solid #6991D1
CSS de l’étiquette en focus
border: 2px solid #6991D1
Dernière mise à jour : 23 février 2023