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.

Types Of Materialize Chips

There are two types of Chips in Materialize CSS.

Contacts
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

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4