Collections

Collections allow you to group list objects together.

Basic

• Alvin
• Alvin
• Alvin
• Alvin

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

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

              Copied!
              content_copy
              

<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

                  Copied!
                  content_copy
                  

<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

              Copied!
              content_copy
              

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