1. Accueil  
  2. Design  
  3. Bases  
  4. Liste

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;

À consulter aussi

Dernière mise à jour : 12 décembre 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