Butter Cake

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>

Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Documentation v4.0

Chip

Chips are complex entities in small blocks.

Usage

Dismissible Chips

Chips With Avatar

More Styles