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:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
<script type="text/javascript"
src=
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<!--Let browser know website
is optimized for mobile-->
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
</head>
<body>
<div class="card-panel">
<h3>Basic Collection</h3>
<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>
</div>
<div class="card-panel">
<h3>Collection with Links</h3>
<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>
</div>
<div class="card-panel">
<h3>Collection with Header</h3>
<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>
</div>
<div class="card-panel">
<h3>Collection with Secondary Content</h3>
<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 green-text">
<i class="material-icons">send</i></a>
</div>
</li>
<li class="collection-item">
<div>
Title<a href="#!"
class="secondary-content green-text">
<i class="material-icons">send</i></a>
</div>
</li>
<li class="collection-item">
<div>
Title<a href="#!"
class="secondary-content green-text">
<i class="material-icons">send</i></a>
</div>
</li>
<li class="collection-item">
<div>
Title<a href="#!"
class="secondary-content green-text">
<i class="material-icons">send</i></a>
</div>
</li>
</ul>
</div>
<div class="card-panel">
<h3>Collection with Avatar Content</h3>
<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 green-text">
<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 green-text">
<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 green-text">
<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 green-text">
<i class="material-icons">grade</i></a>
</li>
</ul>
</div>
<div class="card-panel">
<h3>Collection with dismissible content</h3>
<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>
</div>
<!-- Compiled and minified JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>
Output: