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>


JS Default
JS Primary
JS Secondary
JS Dark
JS Gray
JS Muted
JS Success
JS Info
Warning
Danger
<div class="chip with-avatar">
  <span class="chip-img">JS</span>
  Default
</div>

<div class="chip primary with-avatar">
  <span class="chip-img">JS</span>
  Primary
</div>

<div class="chip secondary with-avatar">
  <span class="chip-img">JS</span>
  Secondary
</div>

<div class="chip dark with-avatar">
  <span class="chip-img">JS</span>
  Dark
</div>

<div class="chip gray with-avatar">
  <span class="chip-img">JS</span>
  Gray
</div>

<div class="chip muted with-avatar">
  <span class="chip-img">JS</span>
  Muted
</div>

<div class="chip success with-avatar">
  <span class="chip-img">JS</span>
  Success
</div>

<div class="chip info with-avatar">
  <span class="chip-img">JS</span>
  Info
</div>

<div class="chip warning with-avatar">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Warning
</div>

<div class="chip danger with-avatar">
  <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?r=pg" class="chip-img">
  Danger
</div>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Page Content