List item ​

Overview of list item

A list comprises several individual list items that share the same style and formatting and are vertically stacked together. Lists display content in a scannable format. Content in lists varies according to the need of the case and can be interactive.

Usage guidelines ​

When to use ​

Use to organize related items described by text (files, options, contacts...) into a group.

When not to use ​

Do not use to display large amount of information: consider using Tables instead.

Writing guidelines ​

Length Keep titles concise and use description fields if items need to be further explained.

Capitalization and case Write title and description in sentence case.

Overflow In case of overflow, title and description wrap to another or multiple lines.

Specifications ​

Anatomy ​

Anatomy of List item
  1. List item
  2. Separator
  3. Title
  4. Description: (optional)
  5. Avatar: (optional)
  6. Time stamp: (optional)
  7. Left icon: (optional)
  8. Right icon: (optional)

Types ​

There are four types of list items: avatar, left-icon, right-icon and text.

Types of list
Docs image
You can modify the default list items types to create your own.
Docs image
Do not mix several types of list items into a single list, to avoid creating an inconsistent look and experience for users.

Size ​

List items are available in one size but can be responsively resized to fit horizontally in your container. Do not alter spacings or other elements' size.

Resizing list items

Styling ​

List is available in both light and dark theme.

List has no background so it inherits the one of the container it is placed in. Make sure there is enough contrast between the text and the container background.

List in dark and light theme

List items are separated in-between with a separator, to visually demarcate their boundaries and to improve scannability, especially if the list items are long or rich in content.

Docs image
Use separators between items.
Docs image

Behavior ​

Positioning ​

Lists are typically placed with main page content or within containers of different sizes.

Alignment ​

List is aligned with the content of the page. Within the list item itself:

  • Title, description and avatar are always left-aligned.
  • Time stamp is always right-aligned.
  • Icons can be placed either on the left, on the right or both, according to the case.
Docs image
Docs image

Content in a list item is vertically centrally by default. If the text spans multiple lines, you should change the alignment so that the elements are top-aligned.

Docs image
Docs image

Interaction ​

List is currently available in default state only.

List items can be interactive and allow users to perform a variety of actions such as downloading files, obtaining more information when tapping on avatars or tooltips, expanding a dotted menu or navigating within the items' content.

Docs image

Accessibility considerations ​

List should be easily scannable. Make sure the content in lists is ordered in a logical way, be that alphabetical, numerical, chronological or dictated by user preference.