Overview

Chips are used to add information, make selections or filter content. Chips should appear dynamically as a group of multiple interactive elements.

To use chips, add classes .chip

To specify the style, use one of these classes:

  • .chip-solid
  • .chip-outline
  • .chip-reverse

Input Chips

For Input Chips, use the class .chip-input

Solid
cancel
Outline
cancel
<div class="chip chip-solid chip-input">
  <div class="chip-thumbnail">
    <img src="/img/headshot.png" alt="">
  </div>
  <div class="chip-text">Solid</div>
  <div class="chip-delete-right">
    <i class="material-icons">cancel</i>
  </div>
</div>

<div class="chip chip-outline chip-input">
  <div class="chip-thumbnail">
    <img src="/img/headshot.png" alt="">
  </div>
  <div class="chip-text">Outline</div>
  <div class="chip-delete-right">
    <i class="material-icons">cancel</i>
  </div>
</div>

Filter Chips

For Filter Chips, use the class .chip-filter

done
Red fish
Blue fish
<div class="chip chip-solid chip-filter">
  <div class="chip-icon-left"><i class="material-icons">done</i></div>
  <div class="chip-text">Red fish</div>
</div>

<div class="chip chip-outline chip-filter">
  <div class="chip-text">Blue fish</div>
</div>

Small Chips

To use a small chip, just add the class .chip-sm

Jane
cancel
Jane
cancel
check
Taxi
Car
<div class="chip chip-sm chip-solid chip-input">
  <div class="chip-thumbnail">
    <img src="/img/headshot.png" alt="">
  </div>
  <div class="chip-text">Jane</div>
  <div class="chip-delete-right"><i class="modus-icon material-icons">cancel</i></div>
</div>

<div class="chip chip-sm chip-outline chip-input">
  <div class="chip-thumbnail">
    <img src="/img/headshot.png" alt="">
  </div>
  <div class="chip-text">Jane</div>
  <div class="chip-delete-right"><i class="modus-icon material-icons">cancel</i></div>
</div>

<div class="chip chip-sm chip-solid chip-filter active">
  <div class="chip-icon-left"><i class="modus-icon material-icons">check</i></div>
  <div class="chip-text">Taxi</div>
</div>

<div class="chip chip-sm chip-outline chip-filter">
  <div class="chip-text">Car</div>
</div>