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:
html
<!DOCTYPE html> < html >
< head >
<!--Import Google Icon Font-->
< link href=
rel="stylesheet" />
<!-- Compiled and minified CSS -->
< link rel="stylesheet"
href=
< script type="text/javascript"
src=
</ 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=
</ script >
</ body >
</ html >
|
Output: