Pill

A pill is applied to a snippet of information, such as tags.

Class .wb-pill and .wb-pills-container

Pills are displayed inline. If there are multiple pills, apply .wb-pills-container to the parent element to visually separate the pills. If you only need one pill, then .wb-pills-container is not needed.

Note that .wb-pills-container applies an negative margin to make sure it is aligned to baseline of any body text or table elements. If the offset is not needed, apply .wb-u-margin-t-0 the container to remove it.

User Roles Aligment
Papel
CS Level 1
OM Level 2
DM Level 3
GM Level 4
DS Level 5
ZS Level 6
AS Level 7
 Aligned to text
Papelito
CS Level 1
OM Level 2
DM Level 3
 Not aligned to text 
<table class='wb-table'>
  <tr>
    <th>User</th>
    <th>Roles</th>
    <th>Aligment</th>
  </tr>
  <tr>
    <td>Papel</td>
    <td>
      <div class='wb-pills-container'>
        <div class='wb-pill'>CS Level 1</div>
        <div class='wb-pill'>OM Level 2</div>
        <div class='wb-pill'>DM Level 3</div>
        <div class='wb-pill'>GM Level 4</div>
        <div class='wb-pill'>DS Level 5</div>
        <div class='wb-pill'>ZS Level 6</div>
        <div class='wb-pill'>AS Level 7</div>
      </div>
    </td>
    <td class='wb-u-whitespace-no-wrap'>Aligned to text</td>
  </tr>
  <tr>
    <td>Papelito</td>
    <td>
      <div class='wb-pills-container wb-u-margin-t-0'>
        <div class='wb-pill'>CS Level 1</div>
        <div class='wb-pill'>OM Level 2</div>
        <div class='wb-pill'>DM Level 3</div>
      </div>
    </td>
    <td class='wb-u-whitespace-no-wrap'>Not aligned to text</td>
  </tr>
</table>

Modifier .wb-pill--large

If you expect to use only one pill (such as when showing the status of something), you can use a large pill to give it more emphasis. This is often used with the background modifier to further emphasize the status (like success or warning).

Pending
Activated
Deactivated
Testing 
<div class='wb-pills-container'>
  <div class='wb-pill wb-pill--large'>
    Pending
  </div>
  <div class='wb-pill wb-pill--large wb-pill--success'>
    Activated
  </div>
  <div class='wb-pill wb-pill--large wb-pill--danger'>
    Deactivated
  </div>
  <div class='wb-pill wb-pill--large wb-pill--warning'>
    Testing
  </div>
</div>

Modifier .wb-pill--small

Use the .wb-pill--small modifier if you want to intermix the pill within regular text, like within a paragraph. The text should have .wb-text--tall modifier applied to adjust it's lineheight.

If we didn’t have birthdays, you wouldn’t be you. If you’d never been born, well then what would you do? If you’d never been born, well then what would you be? You might be a fish! Or a toad in a tree! You might be a doorknob! 

<p class='wb-text wb-text--tall'>
  If we didn’t have birthdays, <a href='#' class='wb-pill wb-pill--small'>you wouldn’t be you</a>.
  If you’d never been born, well then what would you do? If you’d never been born,
  well then what would you be? You might be a <span class='wb-pill wb-pill--small'>fish</span>!
  Or a toad in a <span class='wb-pill wb-pill--small'>tree</span>!
  You might be a <span class='wb-pill wb-pill--small'>doorknob</span>!
</p>

Modifier .wb-pill--brand-alt, .wb-pill--success, .wb-pill--warning, .wb-pill--danger

Use these modifiers to apply different colors/meaning to the pill. Note that for each of these, you can also use the equivialent mixin @wb-pill-style($style) to apply to custom classes. The valid $styles are brand-alt, success, warning and danger.

Regular
Brand Alt
Success
Warning
Danger 
<div class='wb-pills-container'>
  <div class='wb-pill'>
    Regular
  </div>
  <div class='wb-pill wb-pill--brand-alt'>
    Brand Alt
  </div>
  <div class='wb-pill wb-pill--success'>
    Success
  </div>
  <div class='wb-pill wb-pill--warning'>
    Warning
  </div>
  <div class='wb-pill wb-pill--danger'>
    Danger
  </div>
</div>