Badges and Pills
================

The theme supports Bootstrap-style badges and pills with the CSS classes
`badge` and `pill`: <span class="badge">badge</span> <span class="pill">pill</span>

There are also the variations
`badge-primary`, `badge-secondary`, `badge-success`, `badge-danger`,
`badge-warning`, `badge-info`, `badge-light`, `badge-dark`, `pill-primary`,
`pill-secondary`, `pill-success`, `pill-danger`, `pill-warning`, `pill-info`,
`pill-light` and `pill-dark`:

<span class="badge-primary">Primary</span>
<span class="badge-secondary">Secondary</span>
<span class="badge-success">Success</span>
<span class="badge-danger">Danger</span>
<span class="badge-warning">Warning</span>
<span class="badge-info">Info</span>
<span class="badge-light">Light</span>
<span class="badge-dark">Dark</span>  
<span class="pill-primary">Primary</span>
<span class="pill-secondary">Secondary</span>
<span class="pill-success">Success</span>
<span class="pill-danger">Danger</span>
<span class="pill-warning">Warning</span>
<span class="pill-info">Info</span>
<span class="pill-light">Light</span>
<span class="pill-dark">Dark</span>

To use these you put one of the CSS classes on a `<span>` like this:

```html
<span class="badge-primary">My Badge</span>
```

You can also put one of the badge or pill classes on an `<a>` to create a badge
or pill with hover and focus states:

<a href="#" class="badge">Badge</a>
<a href="#" class="badge-primary">Primary</a>
<a href="#" class="badge-secondary">Secondary</a>
<a href="#" class="badge-success">Success</a>
<a href="#" class="badge-danger">Danger</a>
<a href="#" class="badge-warning">Warning</a>
<a href="#" class="badge-info">Info</a>
<a href="#" class="badge-light">Light</a>
<a href="#" class="badge-dark">Dark</a>  
<a href="#" class="pill">Pill</a>
<a href="#" class="pill-primary">Primary</a>
<a href="#" class="pill-secondary">Secondary</a>
<a href="#" class="pill-success">Success</a>
<a href="#" class="pill-danger">Danger</a>
<a href="#" class="pill-warning">Warning</a>
<a href="#" class="pill-info">Info</a>
<a href="#" class="pill-light">Light</a>
<a href="#" class="pill-dark">Dark</a>

Badges and pills can be used inside paragraphs (or list items, headings etc):

### Heading <span class="pill">Pill</span>

This is a paragraph with an inline
<span class="badge">badge</span>
in it.

* First list item <span class="badge">23</span>
* Second list item <span class="pill">16</span>
* Third list item <span class="badge">32</span>