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_jSize composites #
The size composite classes .xs, .sm, .md, .lg, and .xl scale
chips up and down, adjusting font and padding.
<span class="chip xs">xs</span>
<span class="chip sm">sm</span>
<span class="chip">md</span>
<span class="chip lg">lg</span>
<span class="chip xl">xl</span> xs sm md lg xl
Set on a container and children inherit the sizing:
<div class="xs">...</div>