MDC List

Single-Line List

Text only

  • Single-line item
  • Single-line item
  • Single-line item

Text only (dense)

  • Single-line item
  • Single-line item
  • Single-line item

Text Only (dark)

  • Single-line item
  • Single-line item
  • Single-line item

Start Detail

  • Single-line item
  • Single-line item
  • Single-line item

Start Detail (dense)

  • Single-line item
  • Single-line item
  • Single-line item

Start Detail Example - Icon with Text

  • Wi-Fi
  • Bluetooth
  • Data Usage

Start Detail Example - Icon with Text (Dark)

  • Wi-Fi
  • Bluetooth
  • Data Usage

Avatar List

  • Single-line item
  • Single-line item
  • Single-line item

Avatar List (dense)

  • Single-line item
  • Single-line item
  • Single-line item

Example - Avatar with Text

  • Panda Panda
  • Sleuth Sleuth
  • Brown Bear Brown Bear

Example - Avatar with Text (Dark)

  • Panda Panda
  • Sleuth Sleuth
  • Brown Bear Brown Bear

End Detail

  • Single-line item
  • Single-line item
  • Single-line item

End Detail (Dense)

  • Single-line item
  • Single-line item
  • Single-line item

Avatar + End Detail

  • Single-line item
  • Single-line item
  • Single-line item

Avatar + End Detail (Dense)

  • Single-line item
  • Single-line item
  • Single-line item

Example - Avatar with Text and icon

Example - Avatar with Text and icon (Dark)

Two-line List

Text-Only

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

Text-Only (Dense)

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

Start Detail

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

Start Detail (Dense)

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

Avatar List

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

Avatar List (dense)

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

End Detail

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

End Detail (Dense)

  • Two-line item Secondary text
  • Two-line item Secondary text
  • Two-line item Secondary text

Example - Two-line avatar + text + icon

  • Photos Jan 9, 2014 info
  • Recipes Jan 17, 2014 info
  • Work Jan 28, 2014 info

Example - Two-line avatar + text + icon (Dark)

  • Photos Jan 9, 2014 info
  • Recipes Jan 17, 2014 info
  • Work Jan 28, 2014 info

List Dividers

Full-Width Dividers

  • Single-line item - section 1
  • Single-line item - section 1
  • Single-line item - section 1
  • Single-line item - section 2
  • Single-line item - section 2

Inset Dividers

  • Single-line item - section 1
  • Single-line item - section 1
  • Single-line item - section 1
  • Single-line item - section 2
  • Single-line item - section 2

List Groups

Basic Usage

List 1

  • Single-line item
  • Single-line item
  • Single-line item

List 2

  • Single-line item
  • Single-line item
  • Single-line item

Example - Two-line Lists, Avatars, end detail, inset dividers

Folders

  • Photos Jan 9, 2014 info
  • Recipes Jan 17, 2014 info
  • Work Jan 28, 2014 info

Files

  • Vacation Itinerary Jan 10, 2014 info
  • Kitchen Remodel Jan 20, 2014 info

Example - Two-line Lists, Avatars, end detail, inset dividers (Dark)

Folders

  • Photos Jan 9, 2014 info
  • Recipes Jan 17, 2014 info
  • Work Jan 28, 2014 info

Files

  • Vacation Itinerary Jan 10, 2014 info
  • Kitchen Remodel Jan 20, 2014 info