Table of Content

List item

UsageDevelopment

About

A List item is a container that can contain simple to more complex content and interactions. If putting two or more list items together in a vertical manner, it can be composed to a List.

Anatomy

A List item:

  1. Can be composed of one, two or three slots.
  2. Leading slot: a leading slot is the slot on the left. It’s meant for leading items only.
  3. Text slot: a text slot is the slot in the middle. It may contain a headline only, or a headline and a sub text.
  4. Trailing slot: a trailing slot is the slot on the right. It often indicates and/or allows to take action.
list-item-anatomy

A List item may be composed of a text slot only, but can never be composed of a leading slot or trailing slot only.

When to use List item

A List item can be used to showcase one, two or three information types next to each other in an ordered manner. If you want to showcase the same information types multiple times, several List items can be used below each other.

A List item may be used for, amongst other things:

  • Composing a list of labels
  • Composing a list of navigation labels
  • Composing a list of history events
when to use list item

When not to use List item

  • Don’t use a List item if you’re in need of showcasing more than 3 information types next to each other within the List item. Create a Table with Table rows instead.
  • Don’t use a List item if the content within communicates an action. Use a Button instead.
Do use buttons to communicating actions.
Do
Don’t use List items to communicate actions.
Don't

Behaviour

States A List item comes with the following states*:

  • Default
  • Hover
  • Focused
  • Pressed
  • Selected

*Sometimes List items don’t need to allow users to interact. The list item then serves the purpose of providing information, and that’s it. In that case, only the default state is used and there won’t be other states provided (see Do & Don’t).

Do use the default state for List items that users should not be able to interact with.
Do
Don’t use other states than the default state for List items that users should not be able to interact with.
Don't

Responsiveness

  • Height: The height of the List item is not fixed an will depend on the content in it. However, it will always have 16px spacing around the content.
  • Width: The List item does not have any minimum of maximum width, instead it does inherit the width of its parent container.
  • Alignment: The leading slot and text slot are always aligned to center left, whereas the trailing slot is always aligned to center right.
  • Text slot behaviour: When the headline and/or subtext get too long or the parent container gets narrowed, the texts will get truncated.
list item responsive example

Content

A List item can contain the following elements and content pieces:

Leading slot

  • Icon

Text slot

  • Headline
  • Sub text

Trailing slot

  • Icon
  • Sub text

Other

  • Divider

Other best practices

Do write consistent labels with similar structures.
Do
Don’t use write inconsistent labels with difference wording/sentence structures.
Don't
If using icons in leading slots, do use icons in all list items in one and the same list.
Do
Don’t use icons for just a few list items only in one and the same list.
Don't
Do use trailing slots for (text) content that is relevant and should attract users attention.
Do
Don’t use trailing slots for (text) content that is not relevant and might attract users attention from what’s important.
Don't

Resources