Chips are compact UI elements used to display small blocks of information, such as tags, categories, or user selections. They can be clickable, removable, or contain avatars & icons. and chips are quasi-navigation components which can highly improve website clarity and increase user experience.

Default Chip Variant

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1" href="#">
   <span class="chip__icon--before blueprint-icon icon-duration"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Complete

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1" href="#">
   <span class="chip__icon--before blueprint-icon icon-success"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Incomplete

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1 status-incomplete" href="#">
   <span class="chip__icon--before blueprint-icon icon-info"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Active

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1 status-active" href="#">
   <span class="chip__icon--before blueprint-icon icon-duration"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Active Complete

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1 status-active" href="#">
   <span class="chip__icon--before blueprint-icon icon-success"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Active Incomplete

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1 status-active" href="#">
   <span class="chip__icon--before blueprint-icon icon-info"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Locked

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1 status-locked" href="#">
   <span class="chip__icon--before blueprint-icon icon-locked"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>

Default Chip Locked Active

Lorem Ipsum

content_copy

<a class="chip display--inline-block position--relative variant-1 status-locked-active" href="#">
   <span class="chip__icon--before blueprint-icon icon-locked"></span>
   <span class="chip__value display--inline-block">Lorem Ipsum</span>
</a>