Lists

Lists

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.

Simple List


Folder List

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Inset List

Nested List

Pinned Subheader List

Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.

This feature is relying on the CSS sticky positioning. Unfortunately it's not implemented by all the browsers we are supporting. We default to disableSticky when not supported.

    • I'm sticky 0
    • Item 0

    • Item 1

    • Item 2

    • I'm sticky 1
    • Item 0

    • Item 1

    • Item 2

    • I'm sticky 2
    • Item 0

    • Item 1

    • Item 2

    • I'm sticky 3
    • Item 0

    • Item 1

    • Item 2

    • I'm sticky 4
    • Item 0

    • Item 1

    • Item 2

List Controls

Checkbox

A checkbox can either be a primary action or a secondary action.

The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.

  • Line item 1

  • Line item 2

  • Line item 3

  • Line item 4

The checkbox is the secondary action for the list item and a separate target.

  • Remy Sharp

    Line item 1

  • Remy Sharp

    Line item 2

  • Remy Sharp

    Line item 3

  • Remy Sharp

    Line item 4

Switch

The switch is the secondary action and a separate target.

  • Settings
  • Wi-Fi

  • Bluetooth

Interactive

Below is an interactive demo that lets you explore the visual results of the different settings:

Text only

  • Single-line item

  • Single-line item

  • Single-line item

Icon with text

  • Single-line item

  • Single-line item

  • Single-line item

Avatar with text

  • Single-line item

  • Single-line item

  • Single-line item

Avatar with text and icon

  • Single-line item

  • Single-line item

  • Single-line item