Materialize CSS Collections

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

Try it now

Source Code : Output

  • image Learn

    Web development
    By sudhakarinfotech

    grade