Description

Lists are continuous, vertical indexes of text and images.

They are composed of items containing primary and supplemental information, which can be shown as text, icons, or images.

The component may be part of a page layout or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-Down Menu, Drag and drop, or Combo box.

Types

Type
Simple list		The most common list is a flat collection of objects.
Check box list		A list where the user can select multiple options.
Tree list		A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page.

Usage & Behaviour

General guidelines

Structure

List items must have:

a label, with the main object name. If the entire name does not fit, it can be truncated and a Tooltip can be used on hover.

List items can optionally also have:

a leading icon. These should only be used if the list can contain several types of object. If all items are the same type, an icon should not be used.
a leading image.
up to 2 secondary lines. Secondary lines cannot have their own leading icons or images.
extra metadata, such as a tag, text, or an icon. These should be positioned to the right of the item, centered vertically.
action icons, such as delete. These should only appear on hover or when an item is selected. They should be positioned to the right of the item, centered vertically (replacing the extra metadata, if it exists).

Single-line list	Two-line list	Three-line list

Lists can also have:

A preceding label at the top of the list, to inform the user about the items included in the list.
A Search field can be used for long, scrolling lists, to help the user to find items easily.

Internal Logic

Lists should be ordered in logical ways that make the content easy to scan. Order the list using one of these rules:

Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric. Sort numeric values in a sequential order, with the lowest number first.
Chronological. Sort time-related information into chronological order, with the most recent first.

States

State	Image	Comment
Regular
Hover
Active
Focused

Interaction

On hover, the row will be highlighted and Check boxes or Icon buttons will appear, where applicable.
When the label is truncated (item name), hovering over it will show a Tooltip with the full label.

There are three possible selection modes:

Single Selection

Multi-select check boxes

Smart Selection

Only one item can be selected.

Clicking anywhere on the item row will select it.

One item must always be selected.

Selecting an item will automatically deselect the previously-selected item.

On hover anywhere over an item, a Check box will appear.

Clicking on a check box will select or deselect an item. This can be repeated for multiple items in the list.

Items can also be selected by holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.

Clicking anywhere on the item row will select it. As with Single selection, selecting an item in this way will automatically deselect the previously-selected item.

Additionally, the user can select multiple items in one of two ways:

By directly selecting item check boxes.
By holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.

When scrolling, the title and Search bar should stick to the top and remain visible.

Best practices

Use when:

A flexible layout is more important than arranging information in a grid.
You want to support relevant content, such as charts.
Content displayed may vary between rows.

Don’t use:

For long, complex lists where grouping and categorisation could be applied → use a Tree.
For complex items with multiple attributes which need to be displayed → use Data Tables.

General:

An optional Search field can be used for long, scrolling lists, to help the user find items easily.
Visual elements, such as leading icons and images, can help the user to scan and absorb a large amount of information.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

Code

<<a box containing the code - discuss with Femi>>