chips

Chips are complex entities in small blocks.

Example

Default Primary Secondary Dark Gray Muted Success Info Warning Danger

<span class="chip">Default</span>
<span class="chip primary">Primary</span>
<span class="chip secondary">Secondary</span>
<span class="chip dark">Dark</span>
<span class="chip gray">Gray</span>
<span class="chip muted">Muted</span>
<span class="chip success">Success</span>
<span class="chip info">Info</span>
<span class="chip warning">Warning</span>
<span class="chip danger">Danger</span>

Dismissible Chips

Default Primary Secondary Dark Gray Muted Success Info Danger

  <span class="chip dismissable">
    Default
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable primary">
    Primary
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable secondary">
    Secondary
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable dark">
    Dark
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable gray">
    Gray
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable muted">
    Muted
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable success">
    Success
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable info">
    Info
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

  <span class="chip dismissable danger">
    Danger
    <span class="btn-clear-chip"><i class="fa fa-close"></i></span>
  </span>

Chips With Avatar

Default

Primary

HR Secondary

HR Dark

HR Gray

HR Muted

HR Success

HR Info

HR Warning

HR Danger

<div class="chip with-avatar avatar-zoomed dismissable">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Default
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip primary with-avatar avatar-zoomed dismissable">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Primary
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip secondary with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Secondary
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip dark with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Dark
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip gray with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Gray
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip muted with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Muted
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip success with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Success
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip info with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Info
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip warning with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Warning
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip danger with-avatar avatar-zoomed dismissable">
  <span class="chip-img">HR</span>
  Danger
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

More Styles

JS Default

JS Primary

JS Secondary

JS Dark

JS Gray

JS Muted

JS Success

JS Info

Warning

Danger

<div class="chip with-avatar dismissable">
  <span class="chip-img">JS</span>
  Default
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip primary with-avatar dismissable">
  <span class="chip-img">JS</span>
  Primary
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip secondary with-avatar dismissable">
  <span class="chip-img">JS</span>
  Secondary
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip dark with-avatar dismissable">
  <span class="chip-img">JS</span>
  Dark
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip gray with-avatar dismissable">
  <span class="chip-img">JS</span>
  Gray
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip muted with-avatar dismissable">
  <span class="chip-img">JS</span>
  Muted
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip success with-avatar dismissable">
  <span class="chip-img">JS</span>
  Success
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip info with-avatar dismissable">
  <span class="chip-img">JS</span>
  Info
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip warning with-avatar dismissable">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Warning
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>

<div class="chip danger with-avatar dismissable">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Danger
  <button class="btn-clear-chip" type="button"><i class="fa fa-close"></i></button>
</div>