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. 

Exemple


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 : 18 janvier 2022