List

A list displays related content in a vertical format.

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:

list-usage-construction
1. List item, 2. Left action, 3. Supporting visual, 4. Label, 5. Description, 6. Additional information, 7. Right action, 8. Background

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.

list-usage-types-list
List in main region

Compact list

A compact list is used in container elements like leading 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.

list-usage-types-compact-list
List inside of a container

Behavior

Feedback of clickable items

All clickable areas change the mouse cursor to a pointer.

  • Labels are underlined on mouseover.

list-usage-behavior-clickable-label
Mouseover on label

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

list-usage-behavior-clickable-button
Mouseover on button

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

list-usage-behavior-clickable-badge
Mouse cursor on badge

Do’s & Don’ts

list-usage-do

list-usage-dont

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

list-usage-do-dont-buttons

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

Style

This chapter shows several list styles in the MindSphere Design System.

Overview

List

list-style-overview-list
List items with icon, additional information and right action

Compact list

list-style-overview-compact-list
Compact list inside of a container

Supporting visual

list-style-overview-supporting-visual
1. Icon, 2. Pictogram (for example avatar), 3. Image

Left action

list-style-overview-left-action
1. Checkbox, 2. Radio button, 3. Move handle

Color

The following table gives reference to the different colors and shades used in the component:

Name State Property Color name
List item all Background color Transparent
Divider all Border color Gray 200
Label all Foreground color Gray 800
Description, Meta information all Foreground color Gray 400

Typography

The following table gives reference to the different font sizes and weights used in the component:

Name State Font-family Font-size Line-height Text-align
Label all Siemens Sans Bold 14px 20px left
Description all Siemens Sans Regular 12px 15px left
Meta information all Siemens Sans Regular 14px 20px right

Sizing and spacing

The following measurements show the dimensions for this component:

General

Per default a list item uses 100% of the region or container it is in.

list-style-spacings-general
General spacing for list items

List

list-style-spacings-list
Spacing for items of a list

Compact list

list-style-spacings-compact-list
Spacing for items of a compact list

Supporting visual

list-style-spacings-supporting-visual
Spacing for supporting visuals: 1. Icon, 2. Pictogram (e.g. avatar), 3. Image

Left action

list-style-spacings-left-action
Spacing for left actions: 1. Checkbox (also applies for radio button), 2. Move handle, 3. Move handle and radio button (also applies for checkbox)

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top