Materialize CSS Collections
Materialize CSS collections specify the group of related information. It groups the list object together.
Basic Step To Create A Materialize Collections
-
Place the
.collectionclass to the collection container i.e<ul>base class.Collection Container
<ul class="container"></ul> -
Then, assign the
.collection-itemclass to the every collection item base class.Collection Item
<ul class="container"> <li class="collection-item">Collection Item</li> </ul>
General Syntax
<ul class="container">
<li class="collection-item">Collection Item</li>
</ul>
Source Code
<div class="row">
<div class="col s12">
<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>
</div>
</div>
Source Code : Output
- HTML5
- CSS3
- Material Design
- Bootstrap 4
Links
Follow the following steps to create collection using link.
- Assign the
.collectionclass to the link container i.e<ul>element base class. - Assign the
.collection-itemclass to the the every collection item i.e (hyperlink<a>) element base class.
General Syntax
<ul class="container">
<a href="#!" class="collection-item">
Collection Item
</a>
</ul>
Source Code
<div class="row">
<div class="col s12">
<ul class="collection">
<a href="#!" class="collection-item">Web Development</a>
<a href="#!" class="collection-item">CSS3</a>
<a href="#!" class="collection-item active">Material Design</a>
<a href="#!" class="collection-item">App development</a>
</ul>
</div>
</div>
Source Code : Output
Headers
Let us follow the step by step process to create collection with header component.
- Assign the
.collection& the.with-headerclass to the collection container i.e<ul>base class. - Assign the
.collection-itemclass to the every collection item(hyperlink element) base class. -
In the end, to make a collection item as a header, assign
.collection-headerclass to that collection item base class.
General Syntax
<ul class="collection with-header">
<li class="collection-header">
<h4>Header</h4>
</li>
<li class="collection-item">Item</li>
</ul>
Source Code
<div class="row">
<div class="col s12">
<ul class="collection with-header">
<li class="collection-header"><h4>Web Development</h4></li>
<li class="collection-item">Front end</li>
<li class="collection-item">Back-end</li>
<li class="collection-item">Ui/Uxd Design</li>
<li class="collection-item">App Development</li>
</ul>
</div>
</div>
Source Code : Output
Web Development
- Front end
- Back-end
- Ui/Uxd Design
- App Development
Secondary Content
To create materialize collection with secondary content, assign the .secondary-content class to the hyperlink element/link element base class .
Source Code
<ul class="collection">
<li class="collection-item">
<div>Message
<a href="#!" class="secondary-content">
<i class="material-icons">send</i>
</a>
</div>
</li>
</ul>
Source Code : Output
-
Message send
Avatar
Follow the following steps to create a Materialize collection content.
- Add the
.collectionclass to the collection container base class. -
Assign the
.collection&the.avatarclass to the every collection child element base class. - Assign the
.circleclass to the every<img>element base class. -
At the end, assign the
.secondary-contentclass to the hyperlink element/link element base class
Source Code
<ul class="collection">
<li class="collection-item avatar">
<img src="../code-support/images/person-chip.jpg" alt="Avatar" 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>
</ul>
Source Code : Output
-
Title
First Line
grade
Second Line
Web Tutorials
