chips #
The .chip class creates a small inline label or tag, useful for displaying
metadata, categories, or status indicators. Chips work on any element but are commonly used
with <span> and <a>.
Chips have color variants (.color_a through .color_j) that tint both
the text and background. Links (a.chip) have slightly bolder text.
<span class="chip">a chip</span> a chip<a class="chip">a link chip</a> a link chipColorful chips #
<span class="chip color_a"> .chip.color_a a.chip.color_a<span class="chip color_b"> .chip.color_b a.chip.color_b<span class="chip color_c"> .chip.color_c a.chip.color_c<span class="chip color_d"> .chip.color_d a.chip.color_d<span class="chip color_e"> .chip.color_e a.chip.color_e<span class="chip color_f"> .chip.color_f a.chip.color_f<span class="chip color_g"> .chip.color_g a.chip.color_g<span class="chip color_h"> .chip.color_h a.chip.color_h<span class="chip color_i"> .chip.color_i a.chip.color_i<span class="chip color_j"> .chip.color_j a.chip.color_jWith .compact #
.compactThe .compact composite class provides tighter sizing
with smaller fonts, inputs, padding, border radii, and flow margins.
<span class="chip compact">compact</span> compact normal
<span class="chip compact color_a">color_a</span>
<span class="chip compact color_b">color_b</span>
<span class="chip compact color_c">color_c</span> color_a color_b color_c
.compact overrides custom properties, so children are compact too:
<div class="compact row gap_sm">
<span class="chip">one</span>
<span class="chip color_d">two</span>
<a class="chip color_e">three</a>
</div>