Étiquettes

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:

1 : 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


2 : La composante peut aussi être aussi utilisée comme un ajout à la navigation. L’étiquette agit comme lien rapide vers des pages de contenu. 

Par exemple, dans la composante En demande (à venir).

Exemple


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


Lorsque utilisé 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.

Lorsque utilisé comme lien dans un contexte de navigation, l’étiquette ne contient pas d’icône «X». Elle met en évidence un lien et dirige vers une page de contenu. Il doit avoir un minimum de 3 étiquettes pour que la composante puisse être utilisée.

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 août 2021