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
- network_wifi Wi-Fi
- bluetooth Bluetooth
- data_usage Data Usage
Start Detail Example - Icon with Text (Dark)
- network_wifi Wi-Fi
- bluetooth Bluetooth
- data_usage 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
-
Sleuth
-
Brown Bear
Example - Avatar with Text (Dark)
-
Panda
-
Sleuth
-
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
-
Brown Bear favorite
-
Panda favorite_border
-
Sleuth favorite_border
Example - Avatar with Text and icon (Dark)
-
Brown Bear favorite
-
Panda favorite_border
-
Sleuth favorite_border
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
Example - Two-line avatar + text + icon (Dark)
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