LISTS

Lists present multiple line items vertically as a single continuous element. Lists are made up of a continuous column of rows. Each row contains a tile.Primary actions fill the tile, and supplemental actions are represented by icons and text.Lists are best suited for similar data types.

Usage

1. A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles.
2. Tiles hold content, and can vary in height within a list.
3. Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text.

List alternatives:

1. If more than three lines of text need to be shown in list tiles, use cards instead.
2. If the primary distinguishing content consists of images, use a grid list.

Density

When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.

Behaviour

Scrolling

Lists scroll only vertically.

Gestures

The swipe action of each tile should be consistent within lists. Tiles may be moved between a list and drop target (similar to moving a file into a folder) and picked up and manually reordered within a list.

Filtering and sorting

List tiles can be sorted or filtered by date, file size, alphabetical order, or other parameters.

Content

1. Collections of list tiles present related content in a consistent format.
2. Lists use hierarchy to prioritize a type or set of content, which helps users find the most important information.
3. List tiles may contain up to three lines of text, and text length may vary between tiles in the same list.
4. To display more than three lines of text, use a card.

Specifications :

1. majority of space on a list tile should be dedicated to the primary action.
2. Place the most distinguishing content towards the left of the tile.
3. In tiles with multi-line content, place the most distinguishing content in the first line.
4. Place supplemental actions on the right side.

Actions

Primary and supplemental actions (such as play, zoom in, delete, and select) may open a subsequent view, such as a card. They do not have a submenu or an action overflow menu.

Primary Actions :

1. Fill the entire tile and are not represented solely by an individual icon or text button.
2. Are consistent for all tiles in a specific list, such as the primary action in a list of music to play songs

Supplemental actions

1. Supplemental Actions Are represented by icons, secondary text, etc
2. These Have consistent functionality throughout a list, such as an icon that indicates if someone is online
3. Have a consistent location in a list’s tiles

Repeating actions

1. Avoid displaying a repeated supplemental action in tiles, such as a share action in every tile.
2. Toggles, such as stars or pins, are exceptions because they provide unique information about each individual tile.

SPECS

For specs of different types of lists Click Here.