Pills -

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.

Number of members 5
Fave Drake songs 17
Number of times my daughter has watched Frozen 23
Number of times I have watched Frozen 7

5 Number of members
17 Fave Drake songs
23 Number of times my daughter has watched Frozen
Number of times I have watched Frozen 7

You purchased this item 23 times

<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>