Lists

Key Points

• Use the same list throughout a collection
• Don’t truncate labels, and they should wrap onto a new line if there is not enough space
• Lists are available in the theme default and inverted colour schemes

Usage

There are several different list styles, each grouped by its use case. These lists are enhancements from the standard unordered/ordered lists.

What is consistent across all of these is that each collection should use the same properties. These properties will vary based on the list of components used, and each can be activated/deactivated as required.

Optional Items

The Icon and Badges are optional items in the list component and can be shown or hidden.

Filters

List items containing checkboxes and radio buttons, which are most commonly used to present a range of options in a collection.

The whole list item is a hit state and would activate the selected state of the radio and checkbox.

Just like the form elements, radio buttons are suited to single selections and checkboxes multiple selections.

Navigational

Defined by the caret right icon, these list items should be used when the component takes the user to a new page or point in the hierarchy.

Icons, subtitles and badges are all optional properties.

Nested Lists

The standard component items have a 16px space on the left. However, in some situations where nests are listed, the spacing should be removed for alignment; see below.

File Links