Materialize CSS
  Prev Page
Next Page  
Materialize Collections
Materialize CSS Collections facilitate you to group list objects together. It represents various types of collections, where a collection is a group of related information items. There are Basic, Links, Active,  Headers, Secondary Content, Avatar Content, Dismissable Content and more...
Basic
<ul class="collection">
  <li class="collection-item">HTML5</li>
  <li class="collection-item">CSS3</li>
  <li class="collection-item">Material Design</li>
  <li class="collection-item">Bootstrap 4</li>
</ul>
Output :
Links
<ul class="collection">
  <a href="#!" class="collection-item">HTML5</a>
  <a href="#!" class="collection-item">CSS3</a>
  <a href="#!" class="collection-item active">Material Design</a>
  <a href="#!" class="collection-item">Bootstrap 4</a>
</ul>
Output :
Headers
<ul class="collection with-header">
    <li class="collection-header"><h4>Tutorials</h4></li>
    <li><a href="#!" class="collection-item">HTML5</a></li>
  	<li><a href="#!" class="collection-item">CSS3</a></li>
  	<li><a href="#!" class="collection-item active">Material Design</a></li>
  	<li><a href="#!" class="collection-item">Bootstrap 4</a></li>
</ul>
Output :
Secondary content
<ul class="collection with-header">
    <li class="collection-header"><h4>Tutorials</h4></li>
    <li class="collection-item">
    	<div>HTML5<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
    <li class="collection-item">
    	<div>CSS3<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
    <li class="collection-item">
    	<div>Material Design<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
    <li class="collection-item">
    	<div>Bootstrap 4<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
</ul>
Output :
Avatar Content
<ul class="collection">
    <li class="collection-item avatar">
      <img src="../images/materialize-circle.jpg" alt="" class="circle">
      <span class="title">Material Design</span>
      <p>Tutorial <br>
         Examples
      </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">code</i>
      <span class="title">HTML5</span>
      <p>Tutorial <br>
         Examples
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <i class="material-icons circle blue">laptop_mac</i>
      <span class="title">CSS3</span>
      <p>Tutorial <br>
         Examples
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
    <li class="collection-item avatar">
      <img src="../images/bootstrap.png" alt="" class="circle">
      <span class="title">Bootstarp 4</span>
      <p>Tutorial <br>
         Examples
      </p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
</ul>
Output :
Dismissable Content

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

<ul class="collection">
    <li class="collection-item dismissable">
    	<div>HTML5<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
    <li class="collection-item dismissable">
    	<div>CSS3<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
    <li class="collection-item dismissable">
    	<div>Material Design<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
    <li class="collection-item dismissable">
    	<div>Bootstarp 4<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
    </li>
</ul>
Output :
  Prev Page
Next Page