Skip to main content

List

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 EEA
  • 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 EEA
  • 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.

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