Materialize CSS Chips

Materialize CSS Chips are used to represent small blocks of information. They are mainly used either for contacts or for tags.

Class used with Materialize CSS Chips

chip: It is used to set the div container as a chip.

Example

Let's take an example to demonstrate the use of chip class to showcase creating various types of tags.

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips 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">       
      <div class = "chip">           
       <img alt ="HTML5" src ="https://www.javatpoint.com/materializecss/images/materialize-chips1.png">HTML 5            
      </div>
      <div class = "chip">           
      HTML 5<i class = "material-icons">close</i>
      </div>		 
   </body>   
</html>

Test it Now

Next TopicMaterialize CSS Collections

← prev next →