Chips placed inside <p> elements will inherit the font size and line spacing of that element.
Lorem ipsum dolor sit amet, consectetur 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 This is a default chip consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p> Lorem ipsum dolor sit amet, <spanclass="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 <spanclass="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.
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.
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.