Multi-column list component

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

Structure

Typically, a MCL is composed of column header and tiles with inline information. 

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

Behavior

When MCL is used in the result pane, the record pane should appear when users click on a MCL item.

To help users clearly see which item has been selected, the background color of the selected item changes to a darker grey.

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.

When panes resize, MCL can be scrolled horizontally. 

Recipes

Customize MCL 

A recipe can be used to allow users to hide/show MCL columns.

View “Customize MCL recipe” to learn more.

MCL with checkboxes

A recipe can be used to add checkboxes in order to perform actions on MCL items.

View “Select & act on MCL items recipe” to learn more.