Collections allow you to group list objects together.

Basic

• Alvin
• Alvin
• Alvin
• Alvin

              <ul class="collection">
                <li class="collection-item">Alvin</li>
                <li class="collection-item">Alvin</li>
                <li class="collection-item">Alvin</li>
                <li class="collection-item">Alvin</li>
              </ul>
            

Links

              <div class="collection">
                <a href="#!" class="collection-item">Alvin</a>
                <a href="#!" class="collection-item active">Alvin</a>
                <a href="#!" class="collection-item">Alvin</a>
                <a href="#!" class="collection-item">Alvin</a>
              </div>
            

Headers

• First Names

• Alvin
• Alvin
• Alvin
• Alvin

              <ul class="collection with-header">
                <li class="collection-header"><h4>First Names</h4></li>
                <li class="collection-item">Alvin</li>
                <li class="collection-item">Alvin</li>
                <li class="collection-item">Alvin</li>
                <li class="collection-item">Alvin</li>
              </ul>
            

Secondary content

• First Names

• Alvinsend
• Alvinsend
• Alvinsend
• Alvinsend

              <ul class="collection with-header">
                <li class="collection-header"><h4>First Names</h4></li>
                <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
                <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
                <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
                <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
              </ul>
            

Avatar Content

• Title

  First Line
  Second Line

  grade
• folder Title

  First Line
  Second Line

  grade
• insert_chart Title

  First Line
  Second Line

  grade
• play_arrow Title

  First Line
  Second Line

  grade

              <ul class="collection">
                <li class="collection-item avatar">
                  <img src="images/yuna.jpg" alt="" class="circle">
                  <span class="title">Title</span>
                  <p>First Line <br>
                     Second Line
                  </p>
                  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                  <i class="material-icons circle">folder</i>
                  <span class="title">Title</span>
                  <p>First Line <br>
                     Second Line
                  </p>
                  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                  <i class="material-icons circle green">insert_chart</i>
                  <span class="title">Title</span>
                  <p>First Line <br>
                     Second Line
                  </p>
                  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                  <i class="material-icons circle red">play_arrow</i>
                  <span class="title">Title</span>
                  <p>First Line <br>
                     Second Line
                  </p>
                  <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
              </ul>
            

Dismissable Content

You can just add the class dismissable to enable each collection item to be swiped away. This is only for touch enabled devices.

• Alvinsend
• Alvinsend
• Alvinsend
• Alvinsend

              <ul class="collection">
                <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
                <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
                <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
                <li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
              </ul>