List

Custom Colors

Example - Two-Line Lists, Avatars, Metadata, 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

Single-Line List

Text only, non-interactive (no states)

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

Text only (dense)

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

Graphic

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

Graphic (dense)

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

Graphic Example - Icon with Text

  • Wi-Fi
  • Bluetooth
  • Data Usage

Leading Checkbox

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
  • Sloth Sloth
  • Brown Bear Brown Bear

Metadata

  • Single-line item $10.00
  • Single-line item $20.00
  • Single-line item $30.00

Metadata (Dense)

  • Single-line item $10.00
  • Single-line item $20.00
  • Single-line item $30.00

Trailing Checkbox

Avatar + Metadata

  • Single-line item $10.00
  • Single-line item $20.00
  • Single-line item $30.00

Avatar + Metadata (Dense)

  • Single-line item $10.00
  • Single-line item $20.00
  • Single-line item $30.00

Example - Avatar with Text and Icon

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

Graphic

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

Graphic (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

Metadata

  • Two-line item Secondary text $10.00
  • Two-line item Secondary text $20.00
  • Two-line item Secondary text $30.00

Metadata (Dense)

  • Two-line item Secondary text $10.00
  • Two-line item Secondary text $20.00
  • Two-line item Secondary text $30.00

Example - Two-line Avatar + Text + Icon

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

Lists w/ Ellipsis

  • Photos This is some secondary text
  • Photos of my best photography using my finely tuned skills and eye This is some secondary text
  • Work Photos This is a description of work photos from the years 2018 to present time while I was a barista

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, Metadata, 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

Interactive Lists (with ink ripple)

Example - Interactive List