Materialize CSS Collections

Materialize CSS Collections facilitate you to group list objects together. It represents various types of collections, where a collection is a group of related information items.

List of class name used in Materialize CSS collections:

Index	Class name	Description
1)	collection	It is used to set the div or ul container as a collection.
2)	collection-item	It is used to set the a or li item as a collection item.
3)	active	It is used to show the a or li item as an active collection item.
4)	with-header	It is used to mark the collection to have a header.
5)	collection-header	It is used to set the a or li item as a collection header.
6)	avatar	It is used to set the a or li item as an avatar item.
7)	dismissible	It is used to enables the collection items to be swiped away. It works on touch screen devices only.

Examples

Example 1

  <html>     <head>        <title>The Materialize Collections Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>               <h3>Simple Collection</h3><hr/>        <ul class = “collection”>           <li class = “collection-item”>HTML 5</li>           <li class = “collection-item”>JQuery</li>           <li class = “collection-item”>JavaScript</li>           <li class = “collection-item”>CSS</li>       </ul>     </body>     </html>  

Test it Now

Example 2

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize Collections Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>           <h3>Collection of Links</h3><hr/>        <div class = “collection”>           <a href=”#” class = “collection-item”>HTML 5</a>           <a href=”#!” class = “collection-item active”>JQuery</a>           <a href=”#!” class = “collection-item”>JavaScript</a>           <a href=”#!” class = “collection-item”>CSS</a>        </div>                <h3>Collection with Header</h3><hr/>        <ul class = “collection with-header”>           <li class = “collection-header”><h3>Front End Technologies</h3></li>           <li class = “collection-item”>HTML 5</li>           <li class = “collection-item”>JQuery</li>           <li class = “collection-item”>JavaScript</li>           <li class = “collection-item”>CSS</li>            </ul>     </body>     </html>  

Test it Now

Example 3

  <html>     <head>        <title>The Materialize Collections Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>              <h3>Collection with Secondary Content</h3><hr/>        <ul class = “collection”>                    <li class = “collection-item”>              <div>HTML 5<a href=”#!” class = “secondary-content”>                 <i class = “material-icons”>cloud</i></a></div></li>           <li class = “collection-item”>              <div>JQuery<a href=”#!” class = “secondary-content”>                 <i class = “material-icons”>cloud</i></a></div></li>           <li class = “collection-item”>              <div>JavaScript<a href=”#!” class = “secondary-content”>                 <i class = “material-icons”>cloud</i></a></div></li>           <li class = “collection-item”>              <div>CSS<a href=”#!” class = “secondary-content”>                 <i class = “material-icons”>cloud</i></a></div></li>        </ul>     </body>     </html>  

Test it Now

Example 4

  <html>     <head>        <title>The Materialize Collections Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>                     <h3>Collection with Avatar</h3><hr/>        <ul class = “collection”>                    <li class = “collection-item avatar”>              <img alt = “html-logo.png” class = “circle”>              <span class = “title”>HTML5</span>              <p>HTML5 is the next major revision of the HTML standard superseding                 HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for                 structuring and presenting content on the World Wide Web.</p>              <a href=”#!” class = “secondary-content”><i class = “material-icons”>                 grade</i></a>           </li>                      <li class = “collection-item avatar”>              <i class = “material-icons circle green”>insert_chart</i>              <span class = “title”>HighCharts</span>              <p></p>              <a href=”#!” class = “secondary-content”><i class = “material-icons”>                 grade</i></a>           </li>        </ul>     </body>     </html>  

Test it Now

Example 5

  <html>     <head>        <title>The Materialize Collections Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>             <h3>Collection with dismissible content</h3><hr/>        <ul class = “collection”>           <li class = “collection-item dismissable”>HTML 5</li>           <li class = “collection-item dismissable”>JQuery</li>           <li class = “collection-item dismissable”>JavaScript</li>           <li class = “collection-item dismissable”>CSS</li>        </ul>     </body>     </html>  

Test it Now

Next TopicMaterialize CSS Footer

Materialize CSS Collections

Materialize CSS Collections

Examples

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like