Pills

pill

A rounded, pill-shaped badge. A pill can support color by adding a text or background modifier.

Pills have no hover state.

Demo

Active
Active
Active
Active

Markup

<div class="pill">
  Active
</div>
<div class="pill text--white background--navy">
  Active
</div>
<div class="pill text--white background--skyblue">
  Active
</div>
<div class="pill text--white background--salmon">
  Active
</div>

split

Demo

Left:
Right
Left:
Right
Left
Middle
Right

Markup

<div class="pill pill--split">
  <div class="pill__label">Left:</div>
  <div class="pill__content">Right</div>
</div>
<div class="pill pill--split text--white background--peach">
  <div class="pill__label text--brown">Left:</div>
  <div class="pill__content">Right</div>
</div>
<div class="pill pill--split text--white background--navy">
  <div class="pill__content background--salmon">Left</div>
  <div class="pill__content background--olive">Middle</div>
  <div class="pill__content background--skyblue">Right</div>
</div>

circle

Pills can be circular.

Demo

33
33

Markup

<div class="pill pill--circle">
  <!-- Optional content here! -->
</div>
<div class="pill pill--circle text--white background--salmon">
  <!-- Optional content here! -->
</div>

Modifiers

Modifier † Behavior
pill--circle-empty-dot Dot pill intended to remain empty.
pill--circle-empty Small, circular pull intended to remain empty.
pill--circle Circular pill intended to contain content.
pill--circle-medium Medium circular pill intended to contain content.
pill--circle-large Large circular pill intended to contain content.

The base class is always required.