materialize-css/jade/page-contents/collections_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <!--  Collections Section  -->
      <div id="basic" class="section scrollspy">

        <div class="row">
          <div class="col s12">
            <p class="caption">Collections allow you to group list objects together.</p>
            <h2 class="header">Basic</h2>
            <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>
            <pre><code class="language-markup">
    &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>
            </code></pre>
            <br>
          </div>
        </div>
      </div>

      <div id="links" class="section scrollspy">
        <div class="row">
          <div class="col s12">
            <h2 class="header">Links</h2>
            <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>
            <pre><code class="language-markup">
      &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>
            </code></pre>
          </div>
        </div>
      </div>

      <div id="headers" class="section scrollspy">
        <div class="row">
          <div class="col s12">
            <h2 class="header">Headers</h2>
            <ul class="collection with-header">
              <li class="collection-header"><h4>First Names</h4></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>
            <pre><code class="language-markup">
      &lt;ul class="collection with-header">
        &lt;li class="collection-header">&lt;h4>First Names&lt;/h4>&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>
            </code></pre>
          </div>
        </div>
      </div>


      <div id="secondary" class="section scrollspy">
        <div class="row">
          <div class="col s12">
            <h2 class="header">Secondary content</h2>
            <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="material-icons">send</i></a></li>
              <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
              <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
              <li class="collection-item">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
            </ul>
            <pre><code class="language-markup">
      &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="material-icons">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="material-icons">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="material-icons">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="material-icons">send&lt;/i>&lt;/a>&lt;/div>&lt;/li>
      &lt;/ul>
            </code></pre>
          </div>

        </div>
      </div>

      <div id="circle" class="section scrollspy">
        <div class="row">
          <div class="col s12">
            <h2 class="header">Avatar Content</h2>
            <ul class="collection">
              <li class="collection-item avatar">
                <img src="images/yuna.jpg" alt="" 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>
              <li class="collection-item avatar">
                <i class="material-icons circle">folder</i>
                <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>
              <li class="collection-item avatar">
                <i class="material-icons circle green">insert_chart</i>
                <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>
              <li class="collection-item avatar">
                <i class="material-icons circle red">play_arrow</i>
                <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>
            <pre><code class="language-markup">
  &lt;ul class="collection">
    &lt;li class="collection-item avatar">
      &lt;img src="images/yuna.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="material-icons">grade&lt;/i>&lt;/a>
    &lt;/li>
    &lt;li class="collection-item avatar">
      &lt;i class="material-icons circle">folder&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="material-icons">grade&lt;/i>&lt;/a>
    &lt;/li>
    &lt;li class="collection-item avatar">
      &lt;i class="material-icons circle green">insert_chart&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="material-icons">grade&lt;/i>&lt;/a>
    &lt;/li>
    &lt;li class="collection-item avatar">
      &lt;i class="material-icons circle red">play_arrow&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="material-icons">grade&lt;/i>&lt;/a>
    &lt;/li>
  &lt;/ul>
            </code></pre>
          </div>

        </div>
      </div>

      <div id="dismiss" class="section scrollspy">
        <div class="row">
          <div class="col s12">
            <h2 class="header">Dismissable Content</h2>
            <p>You can just add the class <code class="language-markup">dismissable</code> to enable each collection item to be swiped away. This is only for touch enabled devices.</p>
            <ul class="collection">
              <li class="collection-item dismissable">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
              <li class="collection-item dismissable">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
              <li class="collection-item dismissable">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
              <li class="collection-item dismissable">Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></li>
            </ul>
            <pre><code class="language-markup">
      &lt;ul class="collection">
        &lt;li class="collection-item dismissable">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="material-icons">send&lt;/i>&lt;/a>&lt;/div>&lt;/li>
        &lt;li class="collection-item dismissable">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="material-icons">send&lt;/i>&lt;/a>&lt;/div>&lt;/li>
        &lt;li class="collection-item dismissable">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="material-icons">send&lt;/i>&lt;/a>&lt;/div>&lt;/li>
        &lt;li class="collection-item dismissable">&lt;div>Alvin&lt;a href="#!" class="secondary-content">&lt;i class="material-icons">send&lt;/i>&lt;/a>&lt;/div>&lt;/li>
      &lt;/ul>
            </code></pre>
          </div>

        </div>
      </div>
      <!-- End collections -->


    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#basic">Basic</a></li>
            <li><a href="#links">Links</a></li>
            <li><a href="#headers">Headers</a></li>
            <li><a href="#secondary">Secondary Content</a></li>
            <li><a href="#circle">Avatar Content</a></li>
            <li><a href="#dismiss">Dismissable Content</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>