List & Column Views#
List views are an alternative to boxed lists, which are able to handle very large lists of content, as well as those with dynamic content. Column views are similar to list views, except that the list has multiple columns, along with headers to allow sorting.
Both list and column views can include text, images and controls in their rows.
List and column views also share the same data model as grid views, and can therefore be used to offer an alternative view of content which is also displayed as a grid.
General Guidelines#
Keep list rows simple and regular. Most should only contain one or two elements each.
When a list row contains multiple text elements, adjust the font size and weight to differentiate each element (see the typography guidelines for more information).
If icons are included in a list, they should use the symbolic style.
By default, use a list order that will be most useful to users.
List views and column views should have a minimum and maximum width, in order to support adaptive scaling.
Column View Sorting#
Indicate which column is sorting the view by showing an upward or downward facing arrow in its header:
Order |
Arrow Direction |
Example |
|---|---|---|
Natural |
Down |
Alphabetical, smallest number first, earliest date first, checked items first |
Reverse |
Up |
Reverse alphabetical, largest number first, most recent date first, unchecked items first |
Clicking an unsorted column header sorts the column in natural order, indicated by showing a down arrow in its header.
Clicking a column header sorted in natural order re-sorts it in reverse order, indicated by showing an up arrow in its header.