Introduction

Lists present multiple line items vertically as a single continuous element. Refer the Material Design Spec to know more about the content options.

To include the MDL list component:

Create a List with basic items.

 1. Code a <ul> element with the class mdl-list; this is the “outer” container, intended to hold all of the list’s content.

<ul class='mdl-list'>
</ul>

 2. Code as many <li> elements as required with the class mdl-list__item; this is intended to hold all of the item’s content.

<ul class='mdl-list'>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
</ul>

 3. Add your content as the children of the <li>, with the appropriate content type modification class for example .

<ul class='mdl-list'>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
</ul>

Configuration options

The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.

MDL Class Effect Remark
.mdl-list Defines list as an MDL component -
.mdl-list__item Defines the List’s Items required
.mdl-list__item-two-line Defines the List’s Items as Two Line Optional Two Line List Variant
.mdl-list__item-three-line Defines the List’s Items as a Three Line Optional Three Line List Variant
.mdl-list__item-primary-content Defines the primary content sub-division -
.mdl-list__item-avatar Defines the avatar sub-division -
.mdl-list__item-icon Defines the icon sub-division -
.mdl-list__item-secondary-content Defines the secondary content sub-division requires .mdl-list__item-two-line or .mdl-list__item-three-line
.mdl-list__item-secondary-info Defines the information sub-division requires .mdl-list__item-two-line or .mdl-list__item-three-line
.mdl-list__item-secondary-action Defines the Action sub-division requires .mdl-list__item-two-line or .mdl-list__item-three-line
.mdl-list__item-text-body Defines the Text Body sub-division requires .mdl-list__item-three-line