Materialize CSS Collections

Collections allow you to group list-objects together. It represents various types of collection i.e., a group of related information .

Following are the various collection class that are used for creating various types of collection:

• Basic: In this the div or ul container as a collection and the a or li item as a collection item.

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

• Link: It is used to show the a or li item as an active collection item.

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

• Header: It is used to make the collection to have a header.

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

• Secondary Content: It is used to set the a or li item as a collection header.

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

• Avatar Content: It is used to set the a or li item as an avatar item.

 <ul class="collection">
 <li class="collection-item avatar">
 <img src="gfg_200X200.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">autorenew</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">build</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">cloud</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>

• Dismissible Content: It is used to enables the collection items to be swiped away. It is used only on touch screen devices.

 <ul class = "collection"> 
 <li class = "collection-item Dismissible">Title</li> 
 <li class = "collection-item Dismissible">Title</li> 
 <li class = "collection-item Dismissible">Title</li> 
 <li class = "collection-item Dismissible">Title</li> 
 </ul>

Example:

Output: