material-design-lite/src/list/README.md

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