Custom Colors
Example - Two-Line Lists, Avatars, Metadata, Inset Dividers
Folders
Files
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
Graphic (dense)
Graphic Example - Icon with Text
- network_wifi Wi-Fi
- bluetooth Bluetooth
- data_usage Data Usage
Leading Checkbox
Avatar List
Avatar List (dense)
Example - Avatar with Text
-
Panda
-
Sloth
-
Brown Bear
Metadata
- Single-line item
- Single-line item
- Single-line item
Metadata (Dense)
- Single-line item
- Single-line item
- Single-line item
Trailing Checkbox
Avatar + Metadata
Avatar + Metadata (Dense)
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
Graphic (Dense)
Avatar List
Avatar List (dense)
Metadata
- Two-line item Secondary text
- Two-line item Secondary text
- Two-line item Secondary text
Metadata (Dense)
- Two-line item Secondary text
- Two-line item Secondary text
- Two-line item Secondary text
Example - Two-line Avatar + Text + Icon
Lists w/ Ellipsis
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
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