Skip to content
STYLESCAPE

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 ss-c-badge--square">Default</span>
            <span class="ss-c-badge ss-c-badge--accent ss-c-badge--square">Accent</span>
            <span class="ss-c-badge ss-c-badge--info ss-c-badge--square">Info</span>
            <span class="ss-c-badge ss-c-badge--success ss-c-badge--square">Success</span>
            <span class="ss-c-badge ss-c-badge--warning ss-c-badge--square">Warning</span>
            <span class="ss-c-badge ss-c-badge--error ss-c-badge--square">Error</span>
        </p>

Rounded Badges

Default Accent Info Success Warning Error

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

Pill Badges

Default Accent Info Success Warning Error

HTML 
<p>
            <span class="ss-c-badge ss-c-badge--pill">Default</span>
            <span class="ss-c-badge ss-c-badge--accent ss-c-badge--pill">Accent</span>
            <span class="ss-c-badge ss-c-badge--info ss-c-badge--pill">Info</span>
            <span class="ss-c-badge ss-c-badge--success ss-c-badge--pill">Success</span>
            <span class="ss-c-badge ss-c-badge--warning ss-c-badge--pill">Warning</span>
            <span class="ss-c-badge ss-c-badge--error ss-c-badge--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-badge--xs">Extra Small</span>
        <span class="ss-c-badge ss-c-badge--sm">Small</span>
        <span class="ss-c-badge">Medium</span>
        <span class="ss-c-badge ss-c-badge--lg">Large</span>
        <span class="ss-c-badge ss-c-badge--xl">Extra Large</span>