List-Item Overview

What does the component do?

  • It displays information in a list.

When should the component be used?

  • Within lists.

Rules

  • A list entry can be used as a display item or for navigation.
  • Swipe as well as click interactions can be defined on list entries.
  • Swipe-to-left is used for the first function and swipe-to-right is used for the second function.

Accessibility

  • If the function of the entry is only displayed via an icon, this must also be stored as an alternative text.
 Variants

States

The component has the following states:

  • Default
  • Pressed
  • Disabled
  • Loading
  • Swipe left (optional)
  • Swipe right (optional)

Variants

The component has the following variants:

  • listed / boxed
  • with icon / without icon
  • with subtext / without subtext
  • with icon right / without icon right
  • with button / without button

Listed

Default

Image of a list-item, default
Image of a list-item, default

without icon

Image of a list-item, witout icon
Image of a list-item, witout icon

with subtext

Image of a list-item, with subtext
Image of a list-item, with subtext

with icon right

Image of a list-item, with icon right
Image of a list-item, with icon right

with button

Image of a list-item, with button
Image of a list-item, with button

Boxed

Default

Image of a boxed list-item, default
Image of a boxed list-item, default

Without icon

Image of a boxed list-item, without icon
Image of a boxed list-item, without icon

With subtext

Image of a boxed list-item, with subtext
Image of a boxed list-item, with subtext

With icon right

Image of a boxed list-item, with icon right
Image of a boxed list-item, with icon right

With button

Image of a boxed list-item, with button
Image of a boxed list-item, with button

Specification

Design