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>

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

<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
  • folderTitle

    First Line
    Second Line

    grade
  • insert_chartTitle

    First Line
    Second Line

    grade
  • play_arrowTitle

    First Line
    Second Line

    grade
<ul class="collection"><li class="collection-item avatar"><img src="../app-assets/images/avatar/avatar-7.png" 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 dismissableto enable each collection item to be swiped away. This is only for touch enabled devices.

<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>
add