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 (.palette_a through .palette_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 palette_a"> .chip.palette_a a.chip.palette_a<span class="chip palette_b"> .chip.palette_b a.chip.palette_b<span class="chip palette_c"> .chip.palette_c a.chip.palette_c<span class="chip palette_d"> .chip.palette_d a.chip.palette_d<span class="chip palette_e"> .chip.palette_e a.chip.palette_e<span class="chip palette_f"> .chip.palette_f a.chip.palette_f<span class="chip palette_g"> .chip.palette_g a.chip.palette_g<span class="chip palette_h"> .chip.palette_h a.chip.palette_h<span class="chip palette_i"> .chip.palette_i a.chip.palette_i<span class="chip palette_j"> .chip.palette_j a.chip.palette_jSize composites #
The size composite classes .sized_xs, .sized_sm, .sized_md, .sized_lg, and .sized_xl scale chips up and down, adjusting font and
padding.
<span class="chip sized_xs">sized_xs</span>
<span class="chip sized_sm">sized_sm</span>
<span class="chip sized_md">sized_md</span>
<span class="chip sized_lg">sized_lg</span>
<span class="chip sized_xl">sized_xl</span> sized_xs sized_sm sized_md sized_lg sized_xl
Set on a container and children inherit the sizing:
<div class="sized_xs">...</div> Without a size context - a size composite, a font_size_* class, or a heading - a
chip keeps its element's own size, so <small class="chip"> stays small:
<span class="chip">span.chip</span>
<small class="chip">small.chip</small> span.chip small.chip