Chips

Chips are used to highlight important text information. They come in two sizes and their color can be customized.

Basic structure

Chips are built by wrapping text within a <span> tag and adding the class .chips.

 
<span class="chips">Default Chip</span>
 

Chips within paragraph text

Chips placed inside <p> elements will inherit the font size and line spacing of that element.

 
<p> Lorem ipsum dolor sit amet, <span class="chips has-bg-purple-500">consectetur</span> adipisicing elit, seddo eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <span class="chips bg-brand-200">This is a default chip</span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
 

Small chip

Implement a small chip by adding the .is-small class to the <span> tag.

 
<span class="chips">Default Chip</span>
<br>
<span class="chips is-small">Small Chip</span>
 

Chip color modifiers

To customize a chip’s background color add the .has-bg-$color-$value class to the <span> tag. To customize a chip’s text color add the .is-$color-$value class to the <span> tag. If a chip’s background color is modified but text color is not, text color will default to either white or black in order to achieve an optimal color contrast ratio.

 
<span class="chips has-bg-lime-500">Green Chip</span>
<br>
<span class="chips has-bg-status-warning">Yellow Chip</span>
<br>
<span class="chips has-bg-violet-100 is-violet-500 ">Violet Chip</span>
 

Text in the chip by default will be either white or black. When selecting text and background colors remember to abide by accessiblity standards and make sure the color contrast is 4.5:1. More information about color contrast can be found on the WCAG site.

Grouped Chips

Grouped chips come in handy when you need to display key value pairs. We’ve made grouping chips easy by wrapping two chips in a <span> tag with the class of .chip-group.

 
<span class="chip-group">
  <span class="chips has-bg-purple-500">Grouped</span><span class="chips has-bg-purple-300">Chip</span>
</span>
 

Variables

You can use these variables in a override.css file to customize this component.