Description

• Lists are continuous, vertical indexes of text and images.

• They are composed of items containing primary and in some cases supplemental information, which can be shown as text, icons, or images.

• The component may be part of a page layout or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-down Menu, Drag and Drop, or Combo Box.

Types

Type	Image	Usage
Simple list		The most common list is a flat collection of objects.
Check box list		A list where the user can select multiple options.
Tree list		A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page.

...

General guidelines

Structure

• List items must have

...

• a label, with the main object name. If the entire name does not fit, it can be truncated and a Tooltip can be used on hover.

• List items can optionally also have:a

  • A leading icon. These should only be used if the list can contain several types of

  object

  • objects. If all items are of the same type, an icon should not be used.

  a

  • A leading image.

  up

  • Up to 2 secondary lines of text. Secondary lines cannot have their own leading icons or images.

  extra

  • Extra metadata, such as a tag, text, or an icon. These should be positioned to the right of the item, centered vertically.

  up

  • Up to 2 action icons, such as delete. These should only appear on hover or when an item is selected. They should be positioned to the right of the item, centered vertically (replacing the extra metadata, if exists).

	Single-line list	Two-line list	Three-line list
Full list
Single Item
Single item with icon / image
Single item with multi select

• Lists can also have:a

  • A preceding label at the top of the list, to inform the user about the items included in the list.

  a

  • A Search field on long lists, allowing users to find items easily.

  a

  • A pagination component

Internal Logic

Lists should be ordered in logical ways that make the content easy to scan. Order the list using one of these rules:

...

	Interaction	Screenshot
Single Selection	Only one item can be selected. Clicking anywhere on the item row will select it. One item must always be selected. Selecting an item will automatically deselect the previously-selected item.
Multi-select check boxes	Clicking on a check box will select or deselect an item. This can be repeated for multiple items in the list. Items can also be selected by holding the ctrl or shift keys on the keyboard and clicking anywhere on the item.
Smart Selection	On hover anywhere over an item, a check box appears. Clicking anywhere on the item row will select it. As with Single selection, selecting an item in this way will automatically deselect the previously-selected item. Additionally, the user can select multiple items in one of two ways: By directly checking any item check boxes. By holding the ctrl or shift keys on the keyboard and clicking anywhere on the item. In this case: clicking any other items (either the check box or the label) will select them. When relevant, an Apply button will appear, allowing the user to apply the selected items.

• When scrolling, the title and Search bar should stick to the top and remain visible.

...