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.