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 dismissable">Title</li>  
           <li class = "collection-item dismissable">Title</li>  
           <li class = "collection-item dismissable">Title</li>  
           <li class = "collection-item dismissable">Title</li>  
        </ul>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
              rel="stylesheet" />
  
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" 
              href=
  
        <script type="text/javascript"
                src=
      </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 Hearder</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 dismissable">Title</li>
                <li class="collection-item dismissable">Title</li>
                <li class="collection-item dismissable">Title</li>
                <li class="collection-item dismissable">Title</li>
            </ul>
        </div>
  
        <!-- Compiled and minified JavaScript -->
        <script src=
      </script>
    </body>
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.