Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

List Item

List Items are used to sort content for users, allowing for straightforward interactions. They are especially useful for vertical navigation and are therefore very common in mobile interfaces.

Image representing the List Item component.

Overview

The List Item is a common component used to list information in a vertical layout. It can also be used to trigger actions such as opening a new page or show hidden content.

These qualities make it an essential asset when designing interfaces meant for mobile devices.

Image showing the anatomy of the List Item component, with numbers pointing to each one of its elements
List Item anatomy

1: Adornment

2: List Item Title

3: Optional, complementary text

4: Status Indicator

5: Custom Action

6: Action Icon

Demo

Access the Figma file and inspect element using Dev Mode.

Image showing how the List Item component looks like in Figma.
List Item in Figma

Guidelines

When creating lists with several items, readability should be the primary concern. Avoid using too much text (especially in the title of the List Item) as well as adding too many actions.

If you’re designing for a product that requires detailed descriptions for each item, consider using a divider.

Image showing two List Items with extensive secondary text. Both have dividers separating them from other items.
Complex items separated by dividers

Even with optimized user flows, lists often end up being long. For this reason, it is important that items are sorted in a logical way. When unsure on how to sort them, sort them alphabetically.

Image showing two interfaces with lists of items. One has them sorted alphabetically, the other has them sorted by date.
Content sorted alphabetically and by date, respectively

Using columns can be helpful in some cases, but doing it inappropriately may cause the layout to look awkward.

Image showing a List Item with too many elements.

Adding too many elements to a List Item will negatively impact its readability.

Last Update

  • Added component to Design System.

Related

Status Indicator

Status Indicators provide visual cues to convey the status of an element or system, helping users to understand actions or …
Previous version of icon font

Icons

Icons are visual metaphors used to represent objects, actions or ideas …
Button skeleton image

Buttons

Buttons are used to perform an action. Their labels tell the user what will happen when they interact with them …

Outline