Lists

A list can be used to display content related to a single subject.

Overview

Lists are used to present information in well-formed and semantic way. The most basic list group is an unordered list.

List Items
  • Crate just odor
  • Daffodil ac facility in
  • Morbid leo risus
  • Port ac consecutive
  • Vestibule at eros

Usage

Use when

  • Creating vertical navigation.
  • Displaying options within a menu.

Don’t use when

  • Displaying tabular data. Instead, use a Table.

Specifications

Lists are available in three sizes: default, condensed (small) and large.

  • Default list: 40px height; 16px font size.
  • Small list: 32px height; 12px font size.
  • Large list: 48px height; 16px font size.

Condensed List

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox

Large List

  • List Item (active)
  • Left Switch
  • Right Switch
  • Left Checkbox

Behaviors

  • Basic lists contain a set of items displayed in rows. Each item is represented as a text label. Depending on the purpose of the list, each row may also be accompanied by a control, such as a checkbox or radio button. The user can also select a row to perform an action on the corresponding item.
  • Complex lists contain a set of items displayed in rows. Each item is represented as a text label. In addition to the item label, the rows in a complex list contain multiple pieces of information for each item. Depending on the purpose of the list, each row may also be accompanied by a control. The user can also select a row to perform an action on the corresponding item.
    • Use when the user can benefit from viewing more information about each list item without needing to select the item first.
    • Use when the available space in the design does not let us display a table.

Editorial

Length

  • Generally, lists should be used to present simple pieces of information. For more complex sets of data, consider using a Table.

Order

  • Arrange list items in a logical way. For example, if the list is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.

Text

  • Use list items that are grammatically parallel. For example, do not mix passive voice with active voice or declarative sentences (statements) with imperative sentences (direct command).
  • We don’t always have control over the content in a list. Sometimes a list displays user-generated content, such as customer names. The default order of such a list is alphabetical or numeric by date.
  • When we have control over list content, present the list items in sentence case (example: Your business name). The default order is alphabetical or numeric by date.
  • In instruction copy, use the words, “select” and “clear” to guide users to make selections. Don’t use the word “deselect.” It’s robotic and can’t be translated easily.
  • Don’t use punctuation in list items unless one of the list items includes more than one sentence. In that case, all the list items will have end punctuation.

Accessibility

  • Make sure the list is keyboard accessible. The tab order needs to be sequential.