June 2, 2016

Material Design Lite – Lists

Material Design Lite – Lists : Material Design Lite (MDL) list is used to display multiple items line wise vertically. Material design provides the inbuilt classes to create beautiful list. Here in this tutorial we are going to explain how you can create list. We will explain it with example and demo. You can use our online editor to run and edit the code.

Material Design Lite – Lists

Let us first create simple list as below-

Basic List

Add the class mdl-list to the <ul> and mdl-list__item to the <li>. This will create a simple list in material design lite.

Material Design Lite – Lists Example:

<ul class='mdl-list'>
  <li class="mdl-list__item">Item 1 </li>
  <li class="mdl-list__item">Item 2</li>
  <li class="mdl-list__item">Item 3</li>
  <li class="mdl-list__item">Item 4</li>
  <li class="mdl-list__item">Item 5</li>
</ul>

Try it »

If you run the above example it will produce output something like this –

Material Design Lite – Lists

Basic List With Primary Content

Add the class mdl-list to the <ul> and mdl-list__item-primary-content to the <span>.

Material Design Lite – Lists Add Icon Example:

<ul class='mdl-list'>
  <li class="mdl-list__item">
  <span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
    User 1
   </span>  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
  User 2
  </span>
  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
   User 3</span>
  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
   User 4</span>
  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
   User 5</span>
  </li>
</ul>

Try it »

If you run the above example it will produce output something like this –

Material Design Lite – Lists Example:

Material Design Lite – List Classes

Following classes are available in material design lite lists. You can use these classes to create beautiful classes.

.mdl-list(required) – This is used to define list as an MDL component.
.mdl-list__item(required)– This is used to define the List Items
.mdl-list__item–two-line(optional) – This is used to define the List’s Items as Two Line.
.mdl-list__item–three-line(optional)- This is used to define the List’s Items as a Three Line Optional Three.
.mdl-list__item-primary-content(optional) – This is used to define the primary content sub-division –
.mdl-list__item-avatar(optional) – This is used to define the avatar sub-division –
.mdl-list__item-icon(optional)– This is used to define the icon sub-division –
.mdl-list__item-secondary-content(optional)-This is used to define the secondary content sub-division requires
.mdl-list__item-two-line or .mdl-list__item-three-line(optional)
.mdl-list__item-secondary-info(optional)– This is used to define the information sub-division
.mdl-list__item-two-line or .mdl-list__item-three-line.
.mdl-list__item-secondary-action(optional)– This is used to define the Action sub-division. .mdl-list__item-two-line or .mdl-list__item-three-line.
.mdl-list__item-text-body – This is used to define the Text Body sub-division needs .mdl-list__item-three-line class.

More Examples

Let’s have look over more example and demo here.

List With Avatars & Actions

You can create list with avatars & actions as below –

Material Design Lite – Lists Add Icon Example:

<ul class='mdl-list'>
  <li class="mdl-list__item">
  <span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
    User 1
   </span> 
   <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
   </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
  User 2
  </span>
  <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
   User 3</span>
   <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
   User 4</span>
   <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
  </li>
  <li class="mdl-list__item"><span class="mdl-list__item-primary-content">
   <i class="material-icons mdl-list__item-icon">person</i>
   User 5</span>
   <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
  </li>
</ul>

Material Design Lite – Lists