Components– Expansion panels

Expansion panels

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.

  • Actions
  • Vertical scrolling<br />Filtering and sorting
Gestures

Swipe
Drag and drop

Alternatives

Cards

In tiles with <strong>multi-line content</strong>, place the most distinguishing content in the first line

Grid lists Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Content

Actions

Specs

A <strong>list</strong> consists of a single continuous column of tessellated sub-divisions of equal width called <strong>rows</strong> that function as containers for <strong>tiles</strong>.

<strong>Tiles</strong> hold content, and can vary in height within a list.

List

Row and tile

Place <strong>supplemental actions</strong> on the right side

Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. They are optimized for reading comprehension while differentiating either between similar data types, or qualities within a single data type.

List alternatives:

15sp Roboto Regular
87% black

If more than three lines of text need to be shown in list tiles, use <strong>cards</strong> instead

12sp Roboto Regular
54% black

If the primary distinguishing content consists of images, use a <strong>grid list</strong>

1dp border
12% black

Density

24dp x 24dp
38% black

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

Typical list scanning pattern

The primary action takes up the majority of the space on the tile. The supplemental action goes on the right side of the tile.

Scrolling

Lists scroll only vertically.

Gestures

The swipe action of each tile should be consistent within lists.

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.

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.

Alphabetical sorting makes information easier to find.

Primary actions

Don’t display information in random order; if the UI doesn’t allow the user to sort a list, your app should use a logical sort order.

Grey 200

Collections of list tiles present related content in a consistent format. Lists use hierarchy to prioritize a type or set of content, which helps users find the most important information. For example, in an email inbox app, an avatar and text snippet are emphasized over a time stamp.

24dp x 24dp
54% black

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

List tiles may contain up to three lines of text, and text length may vary between tiles in the same list. To display more than three lines of text, use a card.

  • Place the most distinguishing content on the left of the tile and the least distinguishing content on the right.Roboto Regular 15sp

Specifications:

  • The majority of space on a list tile should be dedicated to the primary action16dp
  • Place the most distinguishing content towards the left of the tile24dp
Fill the entire tile and are not represented solely by an individual icon or text button