Badge

Documentation and examples for badges.

Default Badge

I am a Default Badge.

HTML 
<p>
            I am a
            <span class="ss-c-badge">Default</span>
            Badge.
        </p>

Square Badges

Default Accent Info Success Warning Error

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

Rounded Badges

Default Accent Info Success Warning Error

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

Pill Badges

Default Accent Info Success Warning Error

HTML 
<p>
            <span class="ss-c-badge ss-c-pill">Default</span>
            <span class="ss-c-badge ss-c-accent ss-c-pill">Accent</span>
            <span class="ss-c-badge ss-c-info ss-c-pill">Info</span>
            <span class="ss-c-badge ss-c-success ss-c-pill">Success</span>
            <span class="ss-c-badge ss-c-warning ss-c-pill">Warning</span>
            <span class="ss-c-badge ss-c-error ss-c-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="ss-c-badge">Paragraph</span></p>
        <h1><span class="ss-c-badge">Header 1</span></h1>
        <h2><span class="ss-c-badge">Header 2</span></h2>
        <h3><span class="ss-c-badge">Header 3</span></h3>
        <h4><span class="ss-c-badge">Header 4</span></h4>
        <h5><span class="ss-c-badge">Header 5</span></h5>
        <h6><span class="ss-c-badge">Header 6</span></h6>
        <span class="ss-c-badge ss-c-xs">Extra Small</span>
        <span class="ss-c-badge ss-c-sm">Small</span>
        <span class="ss-c-badge ss-c-md">Medium</span>
        <span class="ss-c-badge ss-c-lg">Large</span>
        <span class="ss-c-badge ss-c-xl">Extra Large</span>