A list of this manner displays a collection of resources of the same type, like products or customers, in a manner that emphasizes the individual resources in the list.

A list may also take the form of a selection list, wherein users can interact it in the manner of a checkbox or radio selection.

This documentation does not cover:

  • Unordered lists
  • Ordered lists

Design Guidelines#

Use when#

As a display element#

  • A collection of resources needs to be displayed in a way that puts focus on the individual resource items instead of the collection as a whole.

As a selection element#

  • In cases where a checkbox or radio is cumbersome to users and the options available may not visually work with alternative displays, particularly on mobile.

Don't use when#

  • Data in resources should be displayed for the purposes of scanning and analysis. See Tables.

Visual Style#

  • Each resource must be displayed in blocks arranged vertically.
  • Separate each list item with a grey line.
  • Individual list items can be formatted as needed to best display the resource data.
    • Each list item must format content in an identical manner for the entire list, barring missing content.
  • Identify the type of resource, usually with a heading.


  • When used as a display element, lists should have more than one data point to display.
  • Lists can be paginated, filtered, and searched.
    • Lists should be paginated at 50 items.


Related components#

Last updated on by Paulo Andrade