@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-collections", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Collections", "crumbs": "
  • Dashboard
  • UI
  • 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>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })