Chip
Chips are complex entities in small blocks.
Usage
To use chip simply add .chip
class to inline tags.
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>
Contact us
Report Bug
Request Feature
Submit Work