Materialize CSS Chips

—

by

in 02. Components

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>

Comments

Leave a Reply Cancel reply