Intro

The standard list item is used for less complex datasets (for example, when the user selects an item in a dialog). It consists of an optional image, a title, description, and a single info text, which can contain semantic information.

Standard list item
Standard list item

Usage

Use the standard list item if:

  • You want to display a simple set of data within a select dialog.
  • You want to display a simple set of data in the master list which does not involve objects. (For objects, use the object list item.)

Responsiveness and Adaptiveness

By default, the title font is larger if the description is empty. 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 (AdaptTitleSize).

While the title and description can wrap, the semantic info text does not wrap or truncate.

Standard list item with image and adapted title
Standard list item with image and adapted title

Components

The standard list item can contain an icon (in the form of an image or from the SAP icon font), a title (left-aligned), a short description (left-aligned below the title), and a semantic info text (right-aligned next to the description).

If the infoState property is set to true, the information text gets inverted. Use this setting for object statuses only.

Standard list item with semantic colored information text
Standard list item with semantic colored information text
Standard list item with inverted semantic colored information text
Standard list item with inverted semantic colored information text

Behavior and Interaction

List item behavior and interaction is similar for all list item variants and is therefore described in the list overview article.

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