A list displays related content in a vertical format.


When to use

Use a list in the following cases:

  • To display and interact with simple pieces of data in a consistent format in the main region of an application.
  • Don’t use a list for displaying complex datasets: Consider using a table instead.
  • Don’t use a list to show a collection of items inside of a navigation- or selection-component: Use a list navigation instead.


There are the following list types:


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

List in main region

Compact list

A compact list is used in container elements. It has smaller spacings than a list and shows fewer information and attributes.

It is used to:

  • Structure content into logical sections.
  • Prevent that small amounts of content is visually spread out too far and becomes hard to read.

Compact list inside a container

General construction

A list consists of the following elements:

1. List item, 2. Left action, 3. Supporting visual, 4. Label, 5. Description and additional information, 6. Right action, 7. Optional item status

1. List item

  • List item information quantity can vary.
  • A list item contains at least a label.
  • 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 and additional information

  • A description text is optional.
  • Use a description text to give additional content-related information.
  • Possible additional information elements are the following:
    • Meta information
    • Badge
    • Flag
    • Severity state

6. Right action

Possible additional right action elements are the following but should be restricted to not more then 3 actions:

  • Secondary button
  • Ghost button (for a `more` menu containing an arbitrary number of actions)

7. Item status (optional)

Sets the status for an item, such as success, information, error etc. This status is optional.


Feedback of clickable items

Feedback of clickable items to mouse interaction:

Mouseover on link

Mouseover on button

Mouse cursor on non-clickable elements, e.g. badge

Mouse cursor on clickable item itself (optional)

Do’s & Don’ts



  • Use a more menu for more than three right actions.
  • Don’t use more than 3 buttons per list item.
  • Don’t use split buttons for right actions.


This chapter shows several list styles in the design system.



List items with icon, optional status, additional information and right actions

Compact list

Compact list inside a container

Supporting visual

1. Icon, 2. Pictogram (for example avatar)

Left action

1. Checkbox, 2. Radio button, 3. Move handle


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

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

Sizing and spacing

The following measurements show the dimensions for this component:


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

General spacing for list items


Spacing for items of a list

Compact list

Spacing for items of a compact list

Supporting visual

Spacing for supporting visuals: 1. Icon, 2. Pictogram (e.g. avatar)

Left action (optional)

Spacing for left actions: 1. Checkbox (also applies for radio button), 2. Move handle

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