Lists present multiple line items in a vertical arrangement as a single continuous element.

Single Line Item

Examples:

  • Inbox

  • Starred

  • Sent Mail

  • Drafts

Basic single line item list
  • inbox

    Inbox

  • star

    Starred

  • send

    Sent

  • drafts

    Drafts

Basic single line item list with icon
  • inbox

    Inbox

  • star

    Starred

  • send

    Sent

  • drafts

    Drafts

  • All Mail

  • Trash

  • Spam

  • Follow Up

Basic single line item list with icon and divider
  • Recent chat
  • Avatar

    Abbey Christensen

  • Avatar

    Alex Nelson

  • Avatar

    Mary Johnson

  • Previous chats
  • Avatar

    Peter Carlsson

  • Avatar

    Trevor Hansen

Basic single line item list with icon, divider and subheader

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

Example of a two-line list
  • phone

    (650) 555-1234

    Mobile

  • (323) 555-6789

    Work

Example of a two-line list with icon
  • phone

    (650) 555-1234

    Mobile

  • (323) 555-6789

    Work

  • mail

    aliconnors@example.com

    Personal

  • ali_connors@example.com

    Work

Example of a two-line list with icon and divider
  • Folders
  • folder

    Photos

    Jan 9, 2014

  • folder

    Recipes

    Jan 17, 2014

  • folder

    Work

    Jan 28, 2014

  • Files
  • description

    Vacation itinerary

    Jan 20,2014

Example of a two-line list with icon, divider and subheader

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...

Example of a three-line list
  • Avatar

    Ali Connors

    Brunch this weekend?

    I'll be in your neighborhood doing errands...

  • Avatar

    Me, Scott, Jennifer

    Summer BBQ

    Wish I could come, but I'm out of town this...

  • Avatar

    Sandra Adams

    Oui oui

    Do you have anu recommendations? Have...

Example of a three-line list with avatar
  • Avatar

    Ali Connors

    Brunch this weekend?

    I'll be in your neighborhood doing errands...

  • Avatar

    Me, Scott, Jennifer

    Summer BBQ

    Wish I could come, but I'm out of town this...

  • Avatar

    Sandra Adams

    Oui oui

    Do you have anu recommendations? Have...

Example of a three-line list with avatar and divider
  • Today
  • Avatar

    Ali Connors

    Brunch this weekend?

    I'll be in your neighborhood doing errands...

  • Avatar

    Me, Scott, Jennifer

    Summer BBQ

    Wish I could come, but I'm out of town this...

  • Yesterday
  • Avatar

    Sandra Adams

    Oui oui

    Do you have anu recommendations? Have...

Example of a three-line list with avatar, divider and subheader

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:

  • Avatar

    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.

  • Avatar

    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.

Example of a three-line list item, long paragraph

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>