menu

Materialize Collections


Materialize Collections Materialize Collections allows us to group list objects together. Here in this tutorial we are going to explain how you can create Collections in Materialize Framework. You can use our online editor to edit and run the code online.


Materialize Collections Example

There are following types of collections available in Materialize Framework-

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

Now let us go one by one to understand the materialize collections.

Basic

Add collection class to ul and collection-item class to the list item simply as below –

Materialize Collection Example: Basic

If you run the above example it will produce the output something like this –

Materialize Collection Example: Basic

Links

You can create Link Collection simply as below –

Materialize Collection Example: Link

If you run the above example it will generate output something like this –

Materialize Collections Example

Header

To create Header in Collection add class with-header to ul and collection-header to li simply as below –

Collection With Example

If you run the above example it will produce output something like this –

Materialize Collections Header Example

Secondary Content

You can add secondary content simply as below –

Secondary Content With Example

If you run the above example it will produce the output something like this –

Add Secondary Content in Materialize Collection

Avatar Content

Here is an example to create Avatar Content –

Avatar Content Example

The output of the above example will be –

Avatar Content Example

Dismissable Content

You can create Dismissable content just add the class dismissable the items simply as below –

Dismissable Content With Example

Advertisements