Intro

The standard list item is a type of list item used in simple lists. You can use it to display a simple data point (title) or a set of data, such as a product title and a few product attributes.

Standard list item with title only

Standard list item with title only

Standard list item with image, title, and short description

Standard list item with image, title, and short description

Usage

Use the standard list item if:

Do not use the standard list item if:

Components

The standard list item can consist of the following parts:

  • Title (mandatory). By default, the title font is larger if there’s no description. If you have list items with and without a description, this results in differently sized titles that are harder to read. In this case, switch off the title size adaptation (property: AdaptTitleSize).
  • Visual: icon or image (optional): Either displayed in the form of an icon from the SAP icon font or as an image.
  • Short description (optional).
  • Status (optional): This semantic information is equivalent to the object status. It’s usually displayed as colored text and displays the status. Keep the status text as short as possible.
    As an alternative, you can invert the display to place a stronger focus on the status
    (property: infoState). Use the inverted display only if the status is critical for your use case and requires immediate action.

Standard list item with all options (image, title, short description, status)

Standard list item with all options (image, title, short description, status)

Responsiveness

The title and short description can wrap and truncate. However, we recommend keeping the text as short as possible. The semantic information text is always displayed in full.

Standard list item with a truncated title

Standard list item with a truncated title

Standard list item with wrapped and truncated title and description

Standard list item with wrapped and truncated title and description

Behavior and Interaction

The list item behavior is identical for all list item types. For more information, see the interaction details in the list overview article.

Examples

Here are a few examples of standard list items:

Standard list items in a list

Standard list items in a list

Standard list item with a title and status

Standard list item with a title and status

Standard list item with a title and short description

Standard list item with a title and short description

Standard list item with a counter in list selection

Standard list item with a counter in list selection

Standard list item with an icon, title, and short description

Standard list item with an icon, title, and short description

Standard list item with an icon, title, short description, and checkbox for selection

Standard list item with an icon, title, short description, and checkbox for selection

Borderless standard list item

Borderless standard list item

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Visual Design

Elements and Controls

Implementation