Liste
La liste à puces, ou énumération verticale, permet de balayer rapidement l’information et facilite la lecture lorsqu’elle est bien utilisée.
Même si une liste à puces occupe plus d'espace vertical dans l'écran, les utilisateurs n'hésitent pas à faire défiler le contenu s’ils sentent qu'ils obtiennent des informations importantes.
Exemple
Quand l'utiliser
La liste sert à mettre en valeur des informations prioritaires et importantes.
Il faut limiter son utilisation : la page contient principalement du texte et non des listes.
L’énumération qui contient moins de 3 éléments est généralement excessive et fonctionne mieux lorsqu’elle est intégrée dans une phrase.
Si des éléments de la liste contiennent plusieurs phrases, le contenu doit aussi être présenté à l’aide de phrases ou de paragraphes.
Comment l’utiliser
Puces décoratives
Les puces dites décoratives sont ajoutées devant des éléments qui ne font pas partie d’une liste. L’utilisation de la puce n’est pas justifiée lorsque les hyperliens servent déjà de mise en évidence et qu’il ne s’agit pas d’une énumération.
À ne pas faire
Informations techniques
Les éléments de premier niveau sont précédés de puces pleines, et les éléments de second niveau, de puces vides.
Un espacement de 8 px se trouve entre la puce et son contenu. Une puce de second niveau comporte une indentation de 8 px.
Les éléments de listes ont un dégagement de 16 px entre eux.
Les puces ont un diamètre de 6 px.
CSS du contenu
color: #223654;
font-family: Open Sans;
font-size: 16px;
line-height: 24px;
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
À consulter aussi
Dernière mise à jour : 15 janvier 2026