Pills

Pills, or Notifications, help keep a user informed of something that has occured. By design, these pills are only static elements that would require a logic or scripting language to hook them up on another element.

  • 5
  • 17
  • 23
  • 7

  • 5
  • 17
  • 23
  • 7

<label for="">Number of members</label>
<span class="pill">5</span>

<label for="">Fave Drake songs</label>
<span class="pill-white">17</span>

<label for="">Number of times my daughter has watched Frozen</label>
<span class="pill-error">23</span>

<label for="">Number of times I have watched Frozen</label>
<span class="pill-success">7</span>

<hr>

<span class="pill">5</span>
<label for="">Number of members</label>

<span class="pill-white">17</span>
<label for="">Fave Drake songs</label>

<span class="pill-error">23</span>
<label for="">Number of times my daughter has watched Frozen</label>

<label for="">Number of times I have watched Frozen</label>
<span class="pill-success">7</span>

<label for="">You purchased this item <span class="pill-success">23</span> times</label>