Used to present chunks of information in a concise and scannable way, lists help to organise content related to a single topic, grouping together a set of items or text options.
Ordered lists
Ordered lists display a set of items in a sequential and logical order, indicated by a number in front of the label. Common use cases include counting, ranking or sequencing, but can be used in everything that has a hierarchy. Different list styles can be applied to list items, like numbers, roman numerals or letters, which can be used interchangeably when nesting (e.g. nested item 1 & 2 under item 3).
Do's
- make sure the items are placed in hierarchical order so that the relation, rank or order is obvious to the user
- indicate the external links, if linking to any pages external to the European Commission
- for easy to read purpose, try to use labels that are relatively consistent in characters & width
Don'ts
- do not nest lists deeper than 3 levels
When to use
- use ordered lists when you need to display items in a specific order or to indicate hierarchy
When not to use
- do not use it for navigation purpose
- do not use it when all items have equal value or importance
- do not use when you have one or more overarching categories that require descriptions
Unordered list
Unordered lists are used to group related content without any particular order, with bullet points placed in front of the labels. Common use cases are much broader than ordered lists. They are used for a set of items that can be arranged in any specific order. Different bullet list styles are available to unordered list items, such as disc, circle, square or hyphen when nesting (eg. 2 sub-points under point 2).
Do's
- indicate the external links, if linking to any pages external to the European Commission
- for easy to read purpose, try to use labels that are relatively consistent in characters & width
Don'ts
- do not nest lists deeper than 3 levels in order to avoid clutters
When to use
- use it when you need to display items that do not have a specific order or hierarchy
When not to use
- do not use it for navigation purpose
- do not use it when items can be ranked, counted or sequenced
- do not use when you have one or more overarching categories or terms require descriptions
Description lists
Description lists are used to display and organise content with a descriptions. Common use cases include glossary, or a list of speakers with their biographies. There are 3 types of description lists depending on user's need. See playground for the examples.
- label with description below it
- label with description aligned to the right of the label instead of below the label; horizontal layout
- label with taxonomy
Do's
- keep label short and meaningful
- order logically according to their hierarchy, significance and degree of relatedness
- avoid using long sentences
- try to use labels that are relatively consistent in characters & width
- add a meaningful description or explanation of each term
Don'ts
- do not use an active voice
- do not nest description lists
When to use
- use a description list when the terms in the list require a specific description or explanation
- on content pages to add additional information(such as latest update on the content of a page) or link to pages of interest
When not to use
- do not use it for navigation purpose
- do not use it when items can be ranked, counted or sequenced