menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

List

The list displays multiple lines of entries in a vertical arrangement. Each line item can contain icons, avatars, text, etc.

Call method

The list component is written in pure CSS, and only needs to write HTML code to take effect.

color

Background color: transparent background.

Text color: black under the light theme, white under the dark theme.

Related Reading

Material Design Guidelines: Components-List

style

Plain Text

This is the simplest list.

codeplay_arrow
Example
  • Inbox
  • Starred
  • Send mail
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>

Use links as list entries.

codeplay_arrow
Example
Inbox Starred Send mail 
<div class="mdui-list">
  <a href="#" class="mdui-list-item mdui-ripple">Inbox</a>
  <a href="#" class="mdui-list-item mdui-ripple">Starred</a>
  <a href="#" class="mdui-list-item mdui-ripple">Send mail</a>
</div>

icon

The list can contain icons.

codeplay_arrow
Example
  • move_to_inbox
    Inbox
  • send
    Outbox
  • delete
    Trash
  • error
    Spam
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

The icon can be on the right side of the list.

codeplay_arrow
Example
  • Inbox
    move_to_inbox
  • Outbox
    send
  • Trash
    delete
  • Spam
    error 
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Inbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Outbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Trash</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Spam</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
  </li>
</ul>

Use the empty icon to occupy the place.

codeplay_arrow
Example
  • move_to_inbox
    Inbox
  • send
    Outbox
  • Trash
  • Spam
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Avatar

The list can contain avatars.

codeplay_arrow
Example
  • Brendan Lim
  • me, Scott, Jennifer
  • Grace Ng
  • Kerem Suer
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar4.jpg"/></div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

The avatar can be on the right side of the list.

codeplay_arrow
Example
  • Brendan Lim
  • me, Scott, Jennifer
  • Grace Ng
  • Kerem Suer
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Brendan Lim</div>
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Grace Ng</div>
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Kerem Suer</div>
    <div class="mdui-list-item-avatar"><img src="avatar4.jpg"/></div>
  </li>
</ul>

Contains both avatars and icons.

codeplay_arrow
Example
  • Brendan Lim
    chat_bubble
  • me, Scott, Jennifer
    chat_bubble
  • Grace Ng
    chat_bubble
  • Kerem Suer
    chat_bubble 
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">Brendan Lim</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">Grace Ng</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar4.jpg"/></div>
    <div class="mdui-list-item-content">Kerem Suer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
</ul>

Use icons instead of avatars.

codeplay_arrow
Example
  • folder
    Photos
  • folder
    Recipes
  • assignment
    Work
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Photos</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Recipes</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">assignment</i>
    <div class="mdui-list-item-content">Work</div>
  </li>
</ul>

Multiline text

Each list entry can contain up to 3 lines of text, if there are more than 3 lines of text, you should use card instead.

By default, the height of the text is not limited. Even if the height of the text exceeds 3 lines, it will be displayed as usual. allowable .mdui-list-item-title with .mdui-list-item-text Add a class to limit the height of the text:

  • Add class .mdui-list-item-one-line Limit the height of text to one line
  • Add class .mdui-list-item-two-line Limit text to two lines of height
  • Add class .mdui-list-item-three-line Limit text to three lines
codeplay_arrow
Example
  • Multiline item
    You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.
  • Multiline item
    You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
</ul>

Divider

There will be 8px spacing above and below the dividing line in the list.

codeplay_arrow
Example
  • Inbox
  • Starred
  • All mail
  • Trash
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">All mail</li>
  <li class="mdui-list-item mdui-ripple">Trash</li>
</ul>

Remove the top and bottom margins of the divider.

codeplay_arrow
Example
  • Brunch this weekend?
    All Connors - I'll be in your neighborhood ...
  • Summer BBQ
    to Alex, Scott, Jennifer - Wish I could ...
  • Oui oui
    Sandra Adams - Do you have Paris reco ...
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line"><span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line"><span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line"><span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...</div>
    </div>
  </li>
</ul>

subtitle

When using a subtitle in the list, a dividing line will be automatically added above the subtitle.

codeplay_arrow
Example
  • Mail
  • Inbox
  • Sent
  • Work
  • Family
  • Friends
<ul class="mdui-list">
  <li class="mdui-subheader">Mail</li>
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Sent</li>
  <li class="mdui-subheader">Work</li>
  <li class="mdui-list-item mdui-ripple">Family</li>
  <li class="mdui-list-item mdui-ripple">Friends</li>
</ul>

Concave subtitle

codeplay_arrow
Example
  • Friends
  • Brendan Lim
  • me, Scott, Jennifer
  • Familay
  • Grace Ng
  • Kerem Suer
<ul class="mdui-list">
  <li class="mdui-subheader-inset">Friends</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-subheader-inset">Familay</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar4.jpg"/></div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Dense list

The elements of a dense list will be more compact.

codeplay_arrow
Example
  • Friends
  • move_to_inbox
    Inbox
  • send
    Outbox
  • Familay
  • delete
    Trash
  • error
    Spam
<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Another example of a dense list.

codeplay_arrow
Example
  • Brunch this weekend?
    All Connors - I'll be in your neighborhood doing errands this weekend. Do you want ...
  • Summer BBQ
    to Alex, Scott, Jennifer - Wish I could come, but I'm out of town this weekend.
  • Oui oui
    Sandra Adams - Do you have Paris recommendations? Have you ever been?
<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-two-line"><span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-two-line"><span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-two-line"><span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?</div>
    </div>
  </li>
</ul>

Active state

The activated items will have a background color and bold text.

codeplay_arrow
Example
  • Inbox
  • Starred
  • Send mail
<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>
codeplay_arrow
Example
  • Brunch this weekend?
    All Connors - I'll be in your neighborhood ...
  • Summer BBQ
    to Alex, Scott, Jennifer - Wish I could ...
  • Oui oui
    Sandra Adams - Do you have Paris reco ...
<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line"><span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line"><span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line"><span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...</div>
    </div>
  </li>
</ul>

List of CSS class names

Class name effect Description
.mdui-list Definition list have to
.mdui-list-dense Define a dense list
.mdui-list-item Define list entries have to
.mdui-list-item-active Set the list entry to be active
.mdui-list-item-icon Define icons in list entries
.mdui-list-item-avatar Define the avatar in the list entry
.mdui-list-item-content Define the content of the list entry
.mdui-list-item-title Define the title in the content of the list entry
.mdui-list-item-text Define the paratext in the content of the list entry
.mdui-list-item-one-line Set the height of the text in one line
.mdui-list-item-two-line Set the text to occupy two lines of height
.mdui-list-item-three-line Set the text to occupy three lines of height

More examples

document list

codeplay_arrow
Example
  • Folders
  • folder
    Photos
    Jan 9, 2014
    info
  • folder
    Recipes
    Jan 17, 2014
    info
  • folder
    Work
    Jan 28, 2014
    info
  • Files
  • assignment
    Photos
    Jan 9, 2014
    info
  • assessment
    Kitchen remodel
    Jan 10, 2014
    info 
<ul class="mdui-list">
  <li class="mdui-subheader-inset">Folders</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Recipes</div>
      <div class="mdui-list-item-text">Jan 17, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Work</div>
      <div class="mdui-list-item-text">Jan 28, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-subheader-inset">Files</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Kitchen remodel</div>
      <div class="mdui-list-item-text">Jan 10, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
</ul>

Address book

codeplay_arrow
Example
  • phone
    (650) 555-1234
    Mobile
    chat_bubble
  • (323) 555-6789
    Work
    chat_bubble
  • email
    aliconnors@example.com
    Personal
  • ali_connors@example.com
    Work
<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">phone</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(650) 555-1234</div>
      <div class="mdui-list-item-text">Mobile</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(323) 555-6789</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">email</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">aliconnors@example.com</div>
      <div class="mdui-list-item-text">Personal</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">ali_connors@example.com</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
  </li>
</ul>
arrow_back Previous
Slider
arrow_forward Next
List control
Set document theme

Theme color

Main color

Accent color