Materialize CSS Collections

Materialize CSS collections are used to group list object together. Basically, it represents a group of related information items. There are following types of collection in materialize CSS framework.

  1. Basic
  2. Links
  3. Headers
  4. Secondary Content
  5. Avatar Content
  6. Dismissable Content

Materialize Collection Classes: - The followings are the predefined collection classes in the MaterializeCSS.

Class name Description
collection It is used to set the collection container i.e. <div> or <ul>
collection-item Add the .collection-item class to the collection container's item, such as a hyperlink (<a>) or <li> element.
active It is used to make active item i.e. <li> or active link (<a>) to the collection.
with-header It confirms that the collection has a header and assigns the .with-header class to the collection container.
collection-header To set the collection item (<li>) or link (<a>) as a collection header.
avatar Use the collection item or collection link to set the avatar item.
dismissible It is used to make the collection items swappable. It works on touch screen devices only.

Basic Steps To Create A Materialize Collection

  • To create a collection in materialize , add the .collection class to the collection container i.e <ul> or <div>.
    Collection Container
    <ul class="container"></ul>  
        
  • Then, assign the .collection-item class to the each collection item such as <li> or <a>.
    Collection Item
    
                 <ul class="container">
      <li class="collection-item">Collection Item</li>
    </ul>  
             

General Syntax

      <ul class="collection">
  <li class="collection-item">Collection Item</li>
</ul>
    
Try it now

Source Code

          <div class="container">
  <ul class="collection">
    <li class="collection-item">HTML5</li>
    <li class="collection-item">CSS3</li>
    <li class="collection-item">Material Design</li>
    <li class="collection-item">Bootstrap 4</li>
  </ul>
</div>
        
Try it now

Source Code: Output

  • HTML5
  • CSS3
  • Material Design
  • Bootstrap 4

Collection Link

To create a collection link in materialize, assign .collection class to the collection container and also assign .collection-item class to the every collection item(hyperlink element) base class.

General Syntax

      <ul class="collection">
  <a href="#!" class="collection-item">cOLLECTION iTEM</a>
</ul>
    
Try it now

Source Code

          <div class="container">
  <ul class="collection">
    <a href="#!" class="collection-item">HTML5</a>
    <a href="#!" class="collection-item">CSS3</a>
    <a href="#!" class="collection-item active">Pure CSS</a>
    <a href="#!" class="collection-item">Bootstrap 4</a>
  </ul>
</div>
        
Try it now

Source Code: Output

Collection With Headers

To create materialize, collection with header assign the .collection & .with-header class to the collection container and also assign .collection-item class to the every collection item(hyperlink element) base class. At the end, to make collection item as a header, assign .collection-header class to that collection item base class.

General Syntax

      <div class="container">
  <ul class="collection with-header">
    <li class="collection-header"><h4>Collection header</h4></li>
    <li class="collection-item">Collection item</li>
  </ul>
</div>
    
Try it now

Source Code

          <div class="container">
  <ul class="collection with-header">
    <li class="collection-header">
      <h4>Services</h4>
    </li>
    <li class="collection-item">Web Design</li>
    <li class="collection-item">Graphics Design</li>
    <li class="collection-item">App Development</li>
    <li class="collection-item">Web Development</li>
  </ul>
</div>
        
Try it now

Source Code: Output

  • Services

  • Web Design
  • Graphics Design
  • App Development
  • Web Development

Materialize Collection With Secondary Content

To create materialize, collection assign .collection & .with-header class to the collection container and also assign .collection-item class to the every collection item(hyperlink element) base class. To make collection item as a header assign .collection-header to that item. At the end, secondary content can be created by assigning .secondary-content to the hyperlink element/link element base class.

General Syntax

      <ul class="collection with-header">
  <li class="collection-header">
    <h4>Collection header</h4>
  </li>
  <li class="collection-item">
    <div>
      Collection item<a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
    </div>
  </li>
</ul>
    
Try it now

Source Code

          <div class="container">
  <ul class="collection with-header">
    <li class="collection-header">
      <h4>Learn</h4>
    </li>
    <li class="collection-item">
      <div>
        HTML5<a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
      </div>
    </li>
    <li class="collection-item">
      <div>
        CSS3<a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
      </div>
    </li>
    <li class="collection-item">
      <div>
        JS<a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
      </div>
    </li>
    <li class="collection-item">
      <div> 
        Jquery <a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
      </div>
    </li>
  </ul>
</div>
        
Try it now

Source Code: Output

Basic Step To Create Avtar Content

Assign .collection class to the collection class container and .collection & .avatar class to the every collection child element base class.Assign .circle class to the every <img> element base class.At the end assign .secondary-content to the hyperlink element/link element base class

General Syntax

      <ul class="collection">
  <li class="collection-item avatar"></li>
</ul>
    
Try it now

Source Code

          <div class="container">
  <ul class="collection">
    <li class="collection-item avatar">
      <img src="https://picsum.photos/id/1/200/300" alt="image" class="circle" />
      <span class="title"><b>Learn</b></span>
      <p>Web development <br /> By sudhakarinfotech</p>
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    </li>
  </ul>
</div>
        
Try it now

Source Code: Output

  • image Learn

    Web development
    By sudhakarinfotech

    grade

Web Tutorials

Materialize CSS Collections
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4