List

Use a list to organise content and improve readability

Lists can be nested within lists

There are two types of list, ordered and unordered

 

Listillustration 2

2. Ordered (Numbered)

List illustration 1

1. Unordered (Bulleted)


Usage

List usage illustration 1

Use lists to allow a user to quickly scan information that has been categorised (by alphabetical, numerical or chronological order for example).

List usage illustration 2

Do not display lists in a horizontal layout — they should always be vertically orientated.

List usage illustration 3

Use ordered lists for ordered content where steps or hierarchy are important.

List usage illustration 4

Use unordered lists for unordered content where the sequence doesn’t matter.


Writing a list

Organising lists

Each list should have a clear heading or introduction.

If a list exceeds 7-10 items, consider breaking it into smaller sections or adding headings.

Avoid deeply nested lists unless necessary; they can be harder to follow.

Keep Items Concise

Aim for short, scannable phrases rather than long sentences.

Keep each item grammatically parallel (e.g., all verbs or all nouns).


Available platforms

Platform

Available

Figma

v1+

Web (@ovotech/element)

v1+

App (@ovotech/element-native)

v1+