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:
<div class="row"> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Inbox</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Starred</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Sent Mail</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Drafts</h3> </div> </li> </ul> </div> </div> <em class="text-caption">Basic single line item list</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">inbox</i> </div> <div class="list-item-text layout-column"> <h3>Inbox</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">star</i> </div> <div class="list-item-text layout-column"> <h3>Starred</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">send</i> </div> <div class="list-item-text layout-column"> <h3>Sent</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">drafts</i> </div> <div class="list-item-text layout-column"> <h3>Drafts</h3> </div> </li> </ul> </div> </div> <em class="text-caption">Basic single line item list with icon</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">inbox</i> </div> <div class="list-item-text layout-column"> <h3>Inbox</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">star</i> </div> <div class="list-item-text layout-column"> <h3>Starred</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">send</i> </div> <div class="list-item-text layout-column"> <h3>Sent</h3> </div> </li> <li class="list-item list-1-line"> <div class="list-icon"> <i class="material-icons">drafts</i> </div> <div class="list-item-text layout-column"> <h3>Drafts</h3> </div> </li> <li class="list-divider"></li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>All Mail</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Trash</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Spam</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> <li class="list-item list-1-line"> <div class="list-item-text layout-column"> <h3>Follow Up</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> </ul> </div> </div> <em class="text-caption">Basic single line item list with icon and divider</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-subheader"> <div class="subheader-inner"> <span class="subheader-content">Recent chat</span> </div> </li> <li class="list-item list-1-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Abbey Christensen</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button> </li> <li class="list-item list-1-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Alex Nelson</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button> </li> <li class="list-item list-1-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Mary Johnson</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button> </li> <li class="list-subheader"> <div class="subheader-inner"> <span class="subheader-content">Previous chats</span> </div> </li> <li class="list-item list-1-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Peter Carlsson</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button> </li> <li class="list-item list-1-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Trevor Hansen</h3> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">chat_bubble</i></button> </li> </ul> </div> </div> <em class="text-caption">Basic single line item list with icon, divider and subheader</em> </div> </div>
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:
<div class="row"> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-2-line"> <div class="list-item-text layout-column"> <h3>Profile Photo</h3> <p>Change your profile photo</p> </div> </li> <li class="list-item list-2-line"> <div class="list-item-text layout-column"> <h3>Show your status</h3> <p>Your status is visible to everyone you use with</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a two-line list</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-2-line"> <div class="list-icon"> <i class="material-icons">phone</i> </div> <div class="list-item-text layout-column"> <h3>(650) 555-1234</h3> <p>Mobile</p> </div> </li> <li class="list-item list-2-line"> <div class="list-item-text list-offset"> <h3>(323) 555-6789</h3> <p>Work</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a two-line list with icon</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-2-line"> <div class="list-icon"> <i class="material-icons">phone</i> </div> <div class="list-item-text layout-column"> <h3>(650) 555-1234</h3> <p>Mobile</p> </div> </li> <li class="list-item list-2-line"> <div class="list-item-text list-offset"> <h3>(323) 555-6789</h3> <p>Work</p> </div> </li> <li class="list-divider inset-divider"></li> <li class="list-item list-2-line"> <div class="list-icon"> <i class="material-icons">mail</i> </div> <div class="list-item-text layout-column"> <h3>aliconnors@example.com</h3> <p>Personal</p> </div> </li> <li class="list-item list-2-line"> <div class="list-item-text list-offset"> <h3>ali_connors@example.com</h3> <p>Work</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a two-line list with icon and divider</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-subheader"> <div class="subheader-inner"> <span class="subheader-content">Folders</span> </div> </li> <li class="list-item list-2-line"> <div class="list-icon list-avatar-icon"> <i class="material-icons">folder</i> </div> <div class="list-item-text layout-column"> <h3>Photos</h3> <p>Jan 9, 2014</p> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> <li class="list-item list-2-line"> <div class="list-icon list-avatar-icon"> <i class="material-icons">folder</i> </div> <div class="list-item-text layout-column"> <h3>Recipes</h3> <p>Jan 17, 2014</p> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> <li class="list-item list-2-line"> <div class="list-icon list-avatar-icon"> <i class="material-icons">folder</i> </div> <div class="list-item-text layout-column"> <h3>Work</h3> <p>Jan 28, 2014</p> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> <li class="list-subheader subheader-offset"> <div class="subheader-inner"> <span class="subheader-content">Files</span> </div> </li> <li class="list-item list-2-line"> <div class="list-icon list-avatar-icon"> <i class="material-icons">description</i> </div> <div class="list-item-text layout-column"> <h3>Vacation itinerary</h3> <p>Jan 20,2014</p> </div> <button type="button" class="secondary-container btn btn-default btn-icon-toggle"><i class="material-icons">info</i></button> </li> </ul> </div> </div> <em class="text-caption">Example of a two-line list with icon, divider and subheader</em> </div> </div>
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:
<div class="row"> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-3-line"> <div class="list-item-text layout-column"> <h3>Ali Connors</h3> <h4>Brunch this weekend?</h4> <p>I'll be in your neighborhood doing errands...</p> </div> </li> <li class="list-item list-3-line"> <div class="list-item-text layout-column"> <h3>Me, Scott, Jennifer</h3> <h4>Summer BBQ</h4> <p>Wish I could come, but I'm out of town this...</p> </div> </li> <li class="list-item list-3-line"> <div class="list-item-text layout-column"> <h3>Sandra Adams</h3> <h4>Oui oui</h4> <p>Do you have anu recommendations? Have...</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a three-line list</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Ali Connors</h3> <h4>Brunch this weekend?</h4> <p>I'll be in your neighborhood doing errands...</p> </div> </li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Me, Scott, Jennifer</h3> <h4>Summer BBQ</h4> <p>Wish I could come, but I'm out of town this...</p> </div> </li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Sandra Adams</h3> <h4>Oui oui</h4> <p>Do you have anu recommendations? Have...</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a three-line list with avatar</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Ali Connors</h3> <h4>Brunch this weekend?</h4> <p>I'll be in your neighborhood doing errands...</p> </div> </li> <li class="list-divider inset-divider"></li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Me, Scott, Jennifer</h3> <h4>Summer BBQ</h4> <p>Wish I could come, but I'm out of town this...</p> </div> </li> <li class="list-divider inset-divider"></li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Sandra Adams</h3> <h4>Oui oui</h4> <p>Do you have anu recommendations? Have...</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a three-line list with avatar and divider</em> </div> <div class="col-lg-6"> <div class="panel panel-default"> <div class="panel-body no-padding"> <ul class="list"> <li class="list-subheader subheader-offset"> <div class="subheader-inner"> <span class="subheader-content">Today</span> </div> </li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Ali Connors</h3> <h4>Brunch this weekend?</h4> <p>I'll be in your neighborhood doing errands...</p> </div> </li> <li class="list-divider inset-divider"></li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Me, Scott, Jennifer</h3> <h4>Summer BBQ</h4> <p>Wish I could come, but I'm out of town this...</p> </div> </li> <li class="list-subheader subheader-offset"> <div class="subheader-inner"> <span class="subheader-content">Yesterday</span> </div> </li> <li class="list-item list-3-line"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text layout-column"> <h3>Sandra Adams</h3> <h4>Oui oui</h4> <p>Do you have anu recommendations? Have...</p> </div> </li> </ul> </div> </div> <em class="text-caption">Example of a three-line list with avatar, divider and subheader</em> </div> </div>
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:
<div class="panel-body no-padding"> <ul class="list"> <li class="list-item list-3-line long-text"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text"> <h3>Min Li Chan</h3> <p> 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. </p> </div> </li> <li class="list-item list-3-line long-text"> <img src="img/avatar.png" class="list-avatar" alt="Avatar"> <div class="list-item-text"> <h3>Min Li Chan</h3> <p> 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. </p> </div> </li> </ul> </div>