list Collections

Collections allow you to group list objects together.

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>

Links

Alvin Alvin Alvin Alvin 
	            	
<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
	            	
<ul class="collection with-header">
	<li class="collection-header"><h5>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>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
    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">
		<img src="img/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">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>
	<li class="collection-item dismissable"><div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div></li>
</ul>