Lists present multiple line items in a vertical arrangement as a single continuous element.
Single Line Item
Examples:
-
Inbox
-
Starred
-
Sent Mail
-
Drafts
-
Inbox
-
Starred
-
Sent
-
Drafts
-
Inbox
-
Starred
-
Sent
-
Drafts
-
All Mail
-
Trash
-
Spam
-
Follow Up
-
Recent chat
-
Abbey Christensen
-
Alex Nelson
-
Mary Johnson
-
Previous chats
-
Peter Carlsson
-
Trevor Hansen
HTML Code:
Basic single line item list
Inbox
Starred
Sent Mail
Drafts
Basic single line item list with icon
Inbox
Starred
Sent
Drafts
Basic single line item list with icon and divider
Inbox
Starred
Sent
Drafts
All Mail
Trash
Spam
Follow Up
Basic single line item list with icon, divider and subheader
Recent chat![]()
Abbey Christensen
![]()
Alex Nelson
![]()
Mary Johnson
Previous chats![]()
Peter Carlsson
![]()
Trevor Hansen
2 Line Item
Examples:
-
Profile Photo
Change your profile photo
-
Show your status
Your status is visible to everyone you use with
-
(650) 555-1234
Mobile
-
(323) 555-6789
Work
-
(650) 555-1234
Mobile
-
(323) 555-6789
Work
-
aliconnors@example.com
Personal
-
ali_connors@example.com
Work
-
Folders
-
Photos
Jan 9, 2014
-
Recipes
Jan 17, 2014
-
Work
Jan 28, 2014
-
Files
-
Vacation itinerary
Jan 20,2014
HTML Code:
Example of a two-line list
Profile Photo
Change your profile photo
Show your status
Your status is visible to everyone you use with
Example of a two-line list with icon
(650) 555-1234
Mobile
(323) 555-6789
Work
Example of a two-line list with icon and divider
(650) 555-1234
Mobile
(323) 555-6789
Work
aliconnors@example.com
Personal
ali_connors@example.com
Work
Example of a two-line list with icon, divider and subheader
FoldersPhotos
Jan 9, 2014
Recipes
Jan 17, 2014
Work
Jan 28, 2014
FilesVacation itinerary
Jan 20,2014
3 Line Item
Examples:
-
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
-
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
-
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
-
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
-
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
-
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
-
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
-
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
-
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
-
Today
-
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
-
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
-
Yesterday
-
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
HTML Code:
Example of a three-line list
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
Example of a three-line list with avatar
![]()
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
![]()
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
![]()
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
Example of a three-line list with avatar and divider
![]()
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
![]()
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
![]()
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
Example of a three-line list with avatar, divider and subheader
Today![]()
Ali Connors
Brunch this weekend?
I'll be in your neighborhood doing errands...
![]()
Me, Scott, Jennifer
Summer BBQ
Wish I could come, but I'm out of town this...
Yesterday![]()
Sandra Adams
Oui oui
Do you have anu recommendations? Have...
3 Line Item, long paragraph
Examples:
-
Min Li Chan
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-
Min Li Chan
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
HTML Code:
![]()
Min Li Chan
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
![]()
Min Li Chan
Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.