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.
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.
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.
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.
- A label is mandatory.
- 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
- Severity state
7. Right action
Possible additional right action elements are the following:
- Secondary button
- Ghost button
- Split button
- A list item has a transparent background color and a divider at the bottom.
- The background inherits the color of the container element.
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.
This chapter shows several list styles in the design system.
The following table gives reference to the different font sizes and weights:
|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:
Per default a list item uses 100% of the region or container it is in.