Collections

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

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

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

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

• favorite 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">
      <i class="material-icons circle default">favorite</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">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>