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

Jane 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

Materialize CSS Chips

Material Chip: Contact

Material Chip:Tags

Web Tutorials