A list allows users to quickly scan through data vertically.

Example of a default list


A list displays a set of items vertically. 

Example of a list in a dropdown

To display more than one list, headlines can be used.

Be aware: If a headline is used for one list, the reminding lists should have headlines as well.

Good example

Each list has a headline

Bad example

Only the first list has a headline


Display list

By default, list items are sorted alphabetically. 

If no list items are available, the following message should be displayed: “No items to show”.

Select an item

When users select an item, the background color changes to a darker grey. It allows users to know which item is selected.

Related pages

A dropdown allows users to have details information and/or perform actions. 
When an app needs to showcase information in a hierarchical way, the hierarchical layout is best suited.
A  multi-column list (MCL) allows users to quickly scan through data both vertically and horizontally.