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