Tag Archives: MaterializeCSS List

December 14, 2016 Materialized

Materialize Collections

Materialize Collections MaterializeCSS Collections allows us to group list objects together and display them. Almost in every application, we need to display data in lists, the collection provides readymade rich collection with various styles which can be used easily. Here in this tutorial, we are going to explain how you can create Collections in MaterializeCSS Framework. You can use our online editor to edit and run the code online.

Materialize Collections Example- MaterializeCSS

Let us go one by one to understand how collections work with example & demo. 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

    
      Item 1
      Item 2
      Item 3
      Item 4

Try it »

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

Links

You can create Link Collection simply as below –

Materialize Collection Example: Link

    
        Item 1
        Item 2
        Item 3
        Item 4

Try it »

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

    
      Header Item
      Item 1
      Item 2
      Item 3
      Item 4

Try it »

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

    
      Header Item
      Item 1 shopping_basket
      Item 2 shopping_basket
      Item 3 shopping_basket
      Item 4 shopping_basket

Try it »

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

   
      
      
      Dave
      "Text Line 1"
      thumb_up
     
      
      
      Dave
      "Text Line 2"
      thumb_up

Try it »

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

    
      Header Item
      Item 1 perm_media
      Item 2 perm_media
      Item 3 perm_media
      Item 4 perm_media

Try it »

Learn More

Let us have look over some more important examples.

Bullet List

In Defualt collection bullet points are removed in MaterializeCSS framework still if you need bulleted List you can add your custom class to make it bullet list.

Bullet List Example:


      Item 1
      Item 2
      Item 3
      Item 4

Try it »