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

    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 d’une icône de suppression « 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 de suppression « 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 de suppression « 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: #daef0;

    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 #4A98D9;

    CSS de l’étiquette en focus
    border: 2px solid #4A98D9;

    Dernière mise à jour : 30 août 2023

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec