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>

UsersFelecia Castro
Content Manager
Max Brooks
Programmer
Patsy Griffin
Support
Vernon Garrett
Photographer
ArticlesMD
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!
PostsNo results were found ;(