[component] Matrix

Overview

The matrix component can be useful to display a selection of items in a format that is less linear than a normal list.

Anatomy

Usage

When to use

  • When displaying a series of elements that have the same hierarchy
  • To visually organise items
  • To display products, features, statistics, apps, etc.

When not to use

  • When there is too much variation in the length of the descriptions or the titles
  • To display items that are not of the same type or level of hierarchy
  • When the user is required to go through all the items. A linear list could be more useful in this case.
  • To display 2 or less items

Behaviour

  • The content can be laid out into 2 or 3 columns.
  • The designer can choose whether to have horizontal or vertical dividers, or both.
  • Titles can also include links.

Examples

Global navigation

Ubuntu.com

Maas.io

2 Likes