Intro

The standard list item is used in simple lists to display a single data point (title) or dataset, such as a product name with a few attributes.

Standard list item

When to Use

Use the standard list item if:

You want to display a simple set of data in a list.
You want to display a simple set of data as part of a list within the select dialog.

Don't

Do not use the standard list item if:

You want to display a business object. Use the object list item instead.

Anatomy

Single list and byline list - anatomy

Icon or image (optional): Either displayed in the form of an icon from the SAP icon font or as an image.
Title: 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).
Supported elements (optional): Status, counter, trailing icon, and buttons.
Navigation indicator (optional): Navigation indicators provide visual cues to the user about their current location and the overall process.
Description area (optional): The description area is part of the byline list components.
Selector (optional): The selector element uses a checkbox or a radio button to select one or more rows from a list component.

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.

Standard list item hovered

Standard list item selected and in focus

Hover

When the user hovers over a list item, the background highlights to show it is interactive, and the cursor changes to a pointer (hand icon).

Select and Focus

When a list item is selected, a blue focus border appears around it, and the background remains highlighted.

Types

The standard list item is used for less complex entries, such as when the user selects an item in a dialog. This list item contains an optional image, a title, description, and a single info text (which can contain semantic information).

Standard list items

Standard list items, each with a status

Standard list items, each with a counter in list selection

Standard list items, each with a title and short description

Standard list items, each with an icon, title, and short description

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

Borderless byline standard list items

Standard list items, each with an image, title, short description, checkbox for selection, and trailing icon

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

Byline list item with a wrapped and truncated title and description

Localization

The standard list item supports both left-to-right (LTR) and right-to-left (RTL) languages. The layout automatically adapts to match the reading direction of the language in use.