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

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>
        

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon