List

A list displays related content in a vertical format.

Usage

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.

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

list-usage-types-compact-list

Compact list inside a container

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

Behavior

Feedback of clickable items

Feedback of clickable items to mouse interaction:

list-usage-behavior-clickable-label

Mouseover on link

list-usage-behavior-clickable-button

Mouseover on button

list-usage-behavior-clickable-badge

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

list-usage-behavior-clickable-item

Mouse cursor on clickable item itself (optional)

Do’s & Don’ts

list-usage-do-dont-buttons

list-usage-do-dont-buttons

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

Style

This chapter shows several list styles in the User Experience Toolkit.

Overview

List

list-style-overview-list

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

Compact list

list-style-overview-compact-list

Compact list inside a container

Supporting visual

list-style-overview-supporting-visual

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

Left action

list-style-overview-left-action

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

Typography

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

NameStateFont-familyFont-sizeLine-heightText-align
LabelallSiemens Sans Bold14px20pxleft
DescriptionallSiemens Sans Roman12px15pxleft

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)

Left action (optional)

list-style-spacings-left-action

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

To align content in different columns, the .item__content column/wrapper elements have to be used.

To see a detailed explanation of all existing helper and debug classes, please refer to the usage table below.

List

List with bold indicators

List with checkboxes

Compact list

Compact list with checkboxes

Compact list without icon

Compact list in (frameless) container

List with debug option

Compact list with debug option

Usage

ElementClassDescription
.list .debug Applies different background colors to the columns to have a visual debugging option.
.list .list--compact The list spacing is more dense compared to the default list.
.list__item .is-info, .is-warning, .is-error, .is-success Adds different states to the list item.
.list__item has-indicator-bold Changes the indicator to a bold variant.
.list__item .is-selected Highlights the list item visually (for a selected state).
.list__item .is-hovered Highlights the list item visually (for a hover state), if items are clickable.
.content__column .content__column--primary Marks the primary data cell for a special headline and description styling.
.content__column .xx-yyy This class can be customized for following breakpoints (xx):
  • xs, sm, md, lg, xl.
In combination with the percentage (yyy) of the data cell for the specified breakpoint:
  • 5, 10, 15, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 85, 90, 95 and 100
e.g. .lg-25, .md-50, .sm-75, .xs-100, ...
.content__column .has-default-width-XX Sets the default width in percent for the according data cell if no other specific width is set for the viewport:
  • Possible percentage values for the defaultWidth-class:
    5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 95 and 100.
The default width, e.g. .has-defaultWidth-50, can be overwritten with the classes described above, e.g. .lg-75 for large displays.
.content__column .xx-hide Every data cell can be hidden for a certain breakpoint. Note that the data cell will still be visible below and above the two breakpoints.
Following values are possible:
  • .xs-hide, .sm-hide, .md-hide, .lg-hide and .xl-hide.
.item__content .xx-nowrap Every list row can be set so that its columns don't wrap if their combined widths are more then 100 percent. By default, columns wrap if they don't fit into one row. By adding this class, the columns will stay in one line for the specified breakpoint range. Following values are possible:
  • .xs-nowrap, .sm-nowrap, .md-nowrap, .lg-nowrap and .xl-nowrap
.content__column .has-alignment-right Marks the data cell which shall be used for action icons/buttons:
  • Data cell should always be right aligned.
Note that this class is not working in combination with the state class .content__column--primary.
.content__column .has-alignment-top The content of this data cell will be aligned to the top of the cell's row.
.content__column .has-alignment-bottom The content of this data cell will be aligned to the bottom of the cell's row.
.content__column .has-alignment-center The content of this data cell will be vertically centered within the cell's row.

Note that a cell can only be aligned top OR center OR bottom, assigning multiple of these helper classes might result in unexpected behaviour.
.content__column .iconUxt .no-margin-left The default left margin of the icon gets removed.
.content__column a .has-icon-only The underlining of an icon nested in an <a> tag gets removed.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top