Materialize CSS Chips

The Materialize CSS chips are used to represent small blocks of information. These are mostly used either for contacts or for tags.

Material Chip: Contact

To create contact chip, add a child element such as <img> inside the the chip.

General Syntax

      <div class="chip">
  <img src="images/yuna.jpg" alt="Contact Person" />Person Name
</div>
    
Try it now

Source Code

          <div class="container">
  <div class="chip">
    <img src="../images/person-chip.jpg" alt="Contact Person" />Jane Doe
  </div>
</div>
        
Try it now

Source Code: Output

Contact PersonJane Doe

Material Chip:Tags

To create a tag chip, just add a close icon inside the chip with the class close.

General Syntax

      <div class="chip">Chip Name
    <i class="close material-icons">close</i>
 </div>
    
Try it now

Source Code

          <div class="container">
  <div class="chip">
    Web Design <i class="close material-icons">close</i>
  </div>
  <div class="chip">
    Graphics Design <i class="close material-icons">close</i>
  </div>
  <div class="chip">
    Web Development <i class="close material-icons">close</i>
  </div>
</div>
        
Try it now

Source Code: Output

Web Design close
Graphics Design close
Web Development close

Web Tutorials

Materialize CSS Chips
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4