Materialize CSS Collections

Collections allow you to group list-objects together. It represents various types of collection i.e., a group of related information .

Following are the various collection class that are used for creating various types of collection:

• Basic: In this the div or ul container as a collection and the a or li item as a collection item.

    <ul class="collection">
            <li class="collection-item">Title</li>
            <li class="collection-item">Title</li>
            <li class="collection-item">Title</li>
            <li class="collection-item">Title</li>
      </ul>

• Link: It is used to show the a or li item as an active collection item.

    <div class="collection">
            <a href="#!" class="collection-item">Title</a>
            <a href="#!" class="collection-item active green">Title</a>
            <a href="#!" class="collection-item">Title</a>
            <a href="#!" class="collection-item active green">Title</a>
        </div>

• Header: It is used to make the collection to have a header.

    <ul class="collection with-header">
            <li class="collection-header">
                <h4>First Names</h4></li>
            <li class="collection-item">Title</li>
            <li class="collection-item">Title</li>
            <li class="collection-item">Title</li>
            <li class="collection-item">Title</li>
        </ul>

• Secondary Content:  It is used to set the a or li item as a collection header.

    <ul class="collection with-header">
            <li class="collection-header"><h4>First Names</h4></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i 
                  class="material-icons">edit</i></a></div></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i 
                  class="material-icons">edit</i></a></div></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i
                  class="material-icons">edit</i></a></div></li>
            <li class="collection-item"><div>Title
            <a href="#!" 
                  class="secondary-content"><i 
                  class="material-icons">edit</i></a></div></li>
        </ul>

• Avatar Content: It is used to set the a or li item as an avatar item.

    <ul class="collection">
          <li class="collection-item avatar">
            <img src="gfg_200X200.png" 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">autorenew</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">build</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">cloud</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>

• Dismissible Content: It is used to enables the collection items to be swiped away. It is used only on touch screen devices.

    <ul class = "collection">  
           <li class = "collection-item Dismissible">Title</li>  
           <li class = "collection-item Dismissible">Title</li>  
           <li class = "collection-item Dismissible">Title</li>  
           <li class = "collection-item Dismissible">Title</li>  
        </ul>

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet" />

        <!-- Compiled and minified CSS -->
        <link rel="stylesheet"
              href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />

        <script type="text/javascript"
                src=
"https://code.jquery.com/jquery-2.1.1.min.js">
      </script>
        <!--Let browser know website
            is optimized for mobile-->
        <meta name="viewport"
              content="width=device-width,
                       initial-scale=1.0" />
    </head>

    <body>
        <div class="card-panel">
            <h3>Basic Collection</h3>
            <ul class="collection">
                <li class="collection-item">Title</li>
                <li class="collection-item">Title</li>
                <li class="collection-item">Title</li>
                <li class="collection-item">Title</li>
            </ul>
        </div>
        <div class="card-panel">
            <h3>Collection with Links</h3>
            <div class="collection">
                <a href="#!" class="collection-item">Title</a>
                <a href="#!"
                   class="collection-item active green">
                  Title</a>
                <a href="#!" class="collection-item">Title</a>
                <a href="#!"
                   class="collection-item active green">
                  Title</a>
            </div>
        </div>
        <div class="card-panel">
            <h3>Collection with Header</h3>
            <ul class="collection with-header">
                <li class="collection-header">
                    <h4>First Names</h4>
                </li>
                <li class="collection-item">Title</li>
                <li class="collection-item">Title</li>
                <li class="collection-item">Title</li>
                <li class="collection-item">Title</li>
            </ul>
        </div>
        <div class="card-panel">
            <h3>Collection with Secondary Content</h3>
            <ul class="collection with-header">
                <li class="collection-header">
                  <h4>First Names</h4></li>
                <li class="collection-item">
                    <div>
                        Title<a href="#!"
                           class="secondary-content green-text">
                      <i class="material-icons">send</i></a>
                    </div>
                </li>
                <li class="collection-item">
                    <div>
                        Title<a href="#!"
                            class="secondary-content green-text">
                      <i class="material-icons">send</i></a>
                    </div>
                </li>
                <li class="collection-item">
                    <div>
                        Title<a href="#!"
                            class="secondary-content green-text">
                      <i class="material-icons">send</i></a>
                    </div>
                </li>
                <li class="collection-item">
                    <div>
                        Title<a href="#!"
                           class="secondary-content green-text">
                      <i class="material-icons">send</i></a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="card-panel">
            <h3>Collection with Avatar Content</h3>
            <ul class="collection">
                <li class="collection-item avatar">
                    <img src="gfg_200X200.png"
                         alt="" class="circle" />
                    <span class="title">Title</span>
                    <p>
                        First Line <br />
                        Second Line
                    </p>
                    <a href="#!"
                       class="secondary-content green-text">
                      <i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                    <i class="material-icons circle">autorenew</i>
                    <span class="title">Title</span>
                    <p>
                        First Line <br />
                        Second Line
                    </p>
                    <a href="#!"
                       class="secondary-content green-text">
                      <i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                    <i class="material-icons circle green">
                      build
                  </i>
                    <span class="title">Title</span>
                    <p>
                        First Line <br />
                        Second Line
                    </p>
                    <a href="#!"
                       class="secondary-content green-text">
                      <i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                    <i class="material-icons circle red">
                      cloud
                  </i>
                    <span class="title">Title</span>
                    <p>
                        First Line <br />
                        Second Line
                    </p>
                    <a href="#!"
                       class="secondary-content green-text">
                      <i class="material-icons">grade</i></a>
                </li>
            </ul>
        </div>
        <div class="card-panel">
            <h3>Collection with dismissible content</h3>
            <ul class="collection">
                <li class="collection-item dismissible">Title</li>
                <li class="collection-item dismissible">Title</li>
                <li class="collection-item dismissible">Title</li>
                <li class="collection-item dismissible">Title</li>
            </ul>
        </div>

        <!-- Compiled and minified JavaScript -->
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
      </script>
    </body>
</html>

Output: