Themed Chip
When appropriate, use a theme class to apply brand colors to a chip.
Important Notes:
When using branded chips, always make sure a chip has good contrast with the page background. For example, do not use a navy colored chip against a navy background.
Demo
Light Theme
Basic Chip
None Chip
White Chip
Black Chip
Gray-Xlight Chip
Navy-Dark Chip
Navy Chip
Navy-Light Chip
Teal Chip
Yellow Chip
Orange Chip
Pink Chip
Wine Chip
Berry Chip
Violet Chip
Dark Theme
Basic Chip
None Chip
White Chip
Black Chip
Gray-Xlight Chip
Navy-Dark Chip
Navy Chip
Navy-Light Chip
Teal Chip
Yellow Chip
Orange Chip
Pink Chip
Wine Chip
Berry Chip
Violet Chip
Twig
{% include '@bolt-components-chip/chip.twig' with {
content: 'Navy Chip',
attributes: {
class: 't-bolt-navy',
}
} only %}
HTML
<div class="c-bolt-chip t-bolt-navy">
Navy Chip
</div>