List

Usage

When to use

Use a list in the following cases:

• To display simple pieces of data in a consistent format. For complex datasets consider using a table instead. For more information, see chapter Table.
• To show a collection of items inside of a navigation- or selection-component.

General construction

A list consists of the following elements:

1. List item

• List item information quantity can vary.
• A list item minimally contains a label and a background.
• A consistent format helps the user to scan and read the content efficiently.

2. Left action

Possible left action elements are the following:

• Move handle
• Selection component (checkbox or radio button)

3. Supporting visual

• A supporting visual is optional.
• A supporting visual may be an icon, pictogram (for example avatar) or image.
• Use only one type of visualization.

4. Label

• A label is mandatory.

5. Description

• A description text is optional.
• Use a description text to give additional content-related information.

6. Additional information

Possible additional information elements are the following:

• Meta information
• Badge
• Flag
• Severity state

7. Right action

Possible additional right action elements are the following:

• Secondary button
• Ghost button
• Split button

8. Background

• A list item has a transparent background color and a divider at the bottom.
• The background inherits the color of the container element.

Types

There are the following list types:

List

A list in the main region uses 100% width of the region. A list has larger spacings than a compact list.

Compact list

A compact list is used in container elements like navigation region etc. It has smaller spacings than a list.

It is used to:

• Structure content into logical sections.
• Prevent that few content is visually clustered and hard to read.

Behavior

Feedback of clickable items

All clickable areas change the mouse cursor to a pointer.

• Labels are underlined on mouseover.

• All other clickable items show their own hover state appearance on mouseover.

• All non interactive elements do not show any feedback at all. The cursor does not change.

Do’s & Don’ts

• Use a compact list inside of a container with fewer content.
• Don’t use a list if the content gets clustered and hard to read on 100% width.

• Use a split button for more than three right actions.
• Don’t use too many buttons in a row.