Collections
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"><h5 class="light">First Names</h5></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"><h5 class="light">First Names</h5></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
grade
Second Line -
folder
Title
First Line
grade
Second Line -
insert_chart
Title
First Line
grade
Second Line -
play_arrow
Title
First Line
grade
Second Line
<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>
Dismissable Content
You can 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>Alvin<a href="#!" class="secondary-content"><i class="material-icons">touch_app</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>
For more detailed informations please visit: http://materializecss.com/grid.html