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

First Names
Alvin
Alvin
Alvin
Alvin

                        <ul class="collection with-header"> <li class="collection-header"><h4>First Names</h4></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="secondary-content mdi-content-send"></i></a></div></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li> <li class="collection-item"><div>Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></div></li> </ul>

Avatar Content

Title
First Line
Second Line
Title
First Line
Second Line
Title
First Line
Second Line
Title
First Line
Second Line

                        <ul class="collection"> <li class="collection-item avatar"> <img src="assets/_con/images/user4-30x30.jpg" alt="" class="circle"> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a> </li> <li class="collection-item avatar"> <i class="mdi-file-folder circle"></i> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a> </li> <li class="collection-item avatar"> <i class="mdi-action-assessment circle green"></i> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a> </li> <li class="collection-item avatar"> <i class="mdi-av-play-arrow circle red"></i> <span class="title">Title</span> <p>First Line <br> Second Line </p> <a href="#!" class="secondary-content"><i class="mdi-action-grade"></i></a> </li> </ul>

                                    Users
                                
                                        Felecia Castro
                                    
                                        Content Manager
                                    
                                        Max Brooks
                                    
                                        Programmer
                                    
                                        Patsy Griffin
                                    
                                        Support
                                    
                                        Vernon Garrett
                                    
                                        Photographer
                                    
                                    Articles
                                
                                        MD
                                    
                                        Material Design
                                    
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
                                    
                                        Admin Dashboard
                                    
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
                                    
                                        RD
                                    
                                        Responsive Design
                                    
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
                                    
                                        Mobile First
                                    
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!
                                    
                                    Posts
                                
                                    No results were found ;(