Chiplets

Inline pills for counts, statuses, tags and categories.

Inline pills used for counts, statuses, tags and categories. The base .chiplet is a rounded label; combine with a status or colour modifier to change the fill. Anchor chiplets pick up link-button states automatically.

Status variants

<span class="chiplet">12</span>
<span class="chiplet chiplet--neutral">Draft</span>
<span class="chiplet chiplet--info">New</span>
<span class="chiplet chiplet--success">Live</span>
<span class="chiplet chiplet--warning">Review</span>
<span class="chiplet chiplet--error">Blocked</span>

Named colour variants

<span class="chiplet chiplet-cyan">Cyan</span>
<span class="chiplet chiplet-yellow">Yellow</span>
<span class="chiplet chiplet-red">Red</span>
<span class="chiplet chiplet-green">Green</span>

Chiplet list

Wrap chiplets in ul.chiplet-list to render a flex row that wraps.

<ul class="chiplet-list">
  <li><a class="chiplet chiplet--neutral" href="#">eleventy</a></li>
  <li><a class="chiplet chiplet--neutral" href="#">css</a></li>
</ul>