## Badge

Documentation and examples for badges.

### Default Badge

I am a Default Badge.

HTML

    <p>
                I am a
                <span class="badge">Default</span>
                Badge.
            </p>

### Square Badges

Default Accent Info Success Warning Error

HTML

    <p>
                <span class="badge">Default</span>
                <span class="badge accent">Accent</span>
                <span class="badge info squared">Info</span>
                <span class="badge success squared">Success</span>
                <span class="badge warning squared">Warning</span>
                <span class="badge error squared">Error</span>
            </p>

### Rounded Badges

Default Accent Info Success Warning Error

HTML

    <p>
                <span class="badge rounded">Default</span>
                <span class="badge accent rounded">Accent</span>
                <span class="badge info rounded">Info</span>
                <span class="badge success rounded">Success</span>
                <span class="badge warning rounded">Warning</span>
                <span class="badge error rounded">Error</span>
            </p>

### Pill Badges

Default Accent Info Success Warning Error

HTML

    <p>
                <span class="badge pill">Default</span>
                <span class="badge accent pill">Accent</span>
                <span class="badge info pill">Info</span>
                <span class="badge success pill">Success</span>
                <span class="badge warning pill">Warning</span>
                <span class="badge error pill">Error</span>
            </p>

### Badge Sizes

Paragraph

# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

###### Header 6

Extra Small Small Medium Large Extra Large
HTML

    <p><span class="badge">Paragraph</span></p>
            <h1><span class="badge">Header 1</span></h1>
            <h2><span class="badge">Header 2</span></h2>
            <h3><span class="badge">Header 3</span></h3>
            <h4><span class="badge">Header 4</span></h4>
            <h5><span class="badge">Header 5</span></h5>
            <h6><span class="badge">Header 6</span></h6>
            <span class="badge xs">Extra Small</span>
            <span class="badge sm">Small</span>
            <span class="badge md">Medium</span>
            <span class="badge lg">Large</span>
            <span class="badge xl">Extra Large</span>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!