A  multi-column list (MCL) allows users to quickly scan through data both vertically and horizontally.

Structure

General information

Typically, a MCL is composed of column header and tiles with inline information. If needed, checkboxes can be added at the very left, allowing users to select list items. 

MCL shall be optimized for reading comprehension by alternating background colors and adding a fleuron to mark the end of a list. 

Multi-column list with checkboxes

List menu

MCL should always have a list menu to perform actions on items and customize the list.

The menu is generally located under a default style “Options” button on the left of the list headline. 

MCL in accordion level with list menu

If the list is displayed in the result pane, the menu is found under the pane menu dropdown.

Result pane with pane header menu

Behavior

Changing display preferences

Users can customize MCL in the “Display preferences” section found in the list dropdown. It allows them to hide/show columns as well as changed how items are sorted.

Sorting MCL can also be done by clicking on a column header.

Performing actions

If actions need to be performed, the MCL should have checkboxes to select items.

When no items are selected, default actions shall be displayed. 

MCL menu with default actions

When items are selected, users should see both default actions and actions related to the selection. 

When the MCL is used in an edit screen, a delete and add icon could be added at the end of each list items so users could perform those actions in a quick and easy way.

Selecting a tile

When users select an item, the background color changes to a darker blue with a light blue outline. It allows users to know when a tile is selected.

Responsive behavior

When panes resize, MCL items become cards.

Cards with icons.
Cards with key / value