{{ enablePlugins('prettify') }}
{% set title = "Collections" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}

  <div class="card-panel">
    Collections allow you to group list objects together.
  </div>

  <!-- Basic -->
  <div class="card-panel">
    <h4>Basic</h4>
    <div class="row">
      <div class="col s12 l5">
        <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>
      </div>
      <div class="col s12 l7">
        <pre class="prettyprint linenums">
&lt;ul class="collection">
  &lt;li class="collection-item">Alvin&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
&lt;/ul></pre>
      </div>
    </div>
  </div>
  <!-- /Basic -->

  <!-- Links -->
  <div class="card-panel">
    <h4>Links</h4>
    <div class="row">
      <div class="col s12 l5">
        <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>
      </div>
      <div class="col s12 l7">
        <pre class="prettyprint linenums">
&lt;div class="collection">
  &lt;a href="#!" class="collection-item">Alvin&lt;/a>
  &lt;a href="#!" class="collection-item active">Alvin&lt;/a>
  &lt;a href="#!" class="collection-item">Alvin&lt;/a>
  &lt;a href="#!" class="collection-item">Alvin&lt;/a>
&lt;/div></pre>
      </div>
    </div>
  </div>
  <!-- /Links -->

  <!-- Header -->
  <div class="card-panel">
    <h4>Headers</h4>
    <div class="row">
      <div class="col s12 l5">
        <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>
      </div>
      <div class="col s12 l7">
        <pre class="prettyprint linenums">
&lt;ul class="collection with-header">
  &lt;li class="collection-header">&lt;h5>First Names&lt;/h5>&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
  &lt;li class="collection-item">Alvin&lt;/li>
&lt;/ul></pre>
      </div>
    </div>
  </div>
  <!-- /Header -->

  <!-- Secondary content -->
  <div class="card-panel">
    <h4>Secondary content</h4>
    <div class="row">
      <div class="col s12 l5">
        <ul class="collection with-header">
          <li class="collection-header"><h4>First Names</h4></li>
          <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="secondary-content mdi-content-send"></i></a></li>
          <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></li>
          <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></li>
          <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="mdi-content-send"></i></a></li>
        </ul>
      </div>
      <div class="col s12 l7">
        <pre class="prettyprint linenums">
&lt;ul class="collection with-header">
  &lt;li class="collection-header">&lt;h4>First Names&lt;/h4>&lt;/li>
  &lt;li class="collection-item">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="secondary-content mdi-content-send">&lt;/i>&lt;/a>&lt;/div>&lt;/li>
  &lt;li class="collection-item">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="mdi-content-send">&lt;/i>&lt;/a>&lt;/div>&lt;/li>
  &lt;li class="collection-item">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="mdi-content-send">&lt;/i>&lt;/a>&lt;/div>&lt;/li>
  &lt;li class="collection-item">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="mdi-content-send">&lt;/i>&lt;/a>&lt;/div>&lt;/li>
&lt;/ul></pre>
      </div>
    </div>
  </div>
  <!-- /Secondary content -->

  <!-- Avatar Content -->
  <div class="card-panel">
    <h4>Avatar Content</h4>
    <div class="row">
      <div class="col s12 l5">
        <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>
      </div>
      <div class="col s12 l7">
        <pre class="prettyprint linenums">
&lt;ul class="collection">
  &lt;li class="collection-item avatar">
    &lt;img src="assets/_con/images/user4-30x30.jpg" alt="" class="circle">
    &lt;span class="title">Title&lt;/span>
    &lt;p>First Line &lt;br>
       Second Line
    &lt;/p>
    &lt;a href="#!" class="secondary-content">&lt;i class="mdi-action-grade">&lt;/i>&lt;/a>
  &lt;/li>
  &lt;li class="collection-item avatar">
    &lt;i class="mdi-file-folder circle">&lt;/i>
    &lt;span class="title">Title&lt;/span>
    &lt;p>First Line &lt;br>
       Second Line
    &lt;/p>
    &lt;a href="#!" class="secondary-content">&lt;i class="mdi-action-grade">&lt;/i>&lt;/a>
  &lt;/li>
  &lt;li class="collection-item avatar">
    &lt;i class="mdi-action-assessment circle green">&lt;/i>
    &lt;span class="title">Title&lt;/span>
    &lt;p>First Line &lt;br>
       Second Line
    &lt;/p>
    &lt;a href="#!" class="secondary-content">&lt;i class="mdi-action-grade">&lt;/i>&lt;/a>
  &lt;/li>
  &lt;li class="collection-item avatar">
    &lt;i class="mdi-av-play-arrow circle red">&lt;/i>
    &lt;span class="title">Title&lt;/span>
    &lt;p>First Line &lt;br>
       Second Line
    &lt;/p>
    &lt;a href="#!" class="secondary-content">&lt;i class="mdi-action-grade">&lt;/i>&lt;/a>
  &lt;/li>
&lt;/ul></pre>
      </div>
    </div>
  </div>
  <!-- /Avatar Content -->

{% endblock %}