Materialize CSS Collections

Materialize CSS collections are used to group list object together. Basically, it represents a group of related information items.

Basic Step To Create Materialize Collections

To create materialize collection, assign .collection class to the collection container and also assign .collection-item class to the every collection item base class.

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 Using Links

Steps To Create Collection Using Links

To create materialize, collection 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

Learn
HTML5
CSS3
JS
Jquery

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

Learn
Web development
By sudhakarinfotech

Materialize CSS Collections

Basic Step To Create Materialize Collections

Collection Using Links

Steps To Create Collection Using Links

Collection With Headers

Services

Materialize Collection With Secondary Content

Learn

Basic Step To Create Avtar Content

Web Tutorials