Sui - Sofia's User Interface

Appearance

Badges ​

Colors ​

html
<span class="badge">Default</span>
<span class="badge inverse">Inverse</span>
<span class="badge primary">Primary</span>

Dot ​

html
<button>
    <span>Default</span>
    <span class="badge dot"></span>
</button>

Positioning ​

html
<button>
    <span>Top Left</span>
    <span class="badge top left">9+</span>
</button>

<button>
    <span>Top Right</span>
    <span class="badge top right">9+</span>
</button>

<button>
    <span>Bottom Left</span>
    <span class="badge bottom left">9+</span>
</button>

<button>
    <span>Bottom Right</span>
    <span class="badge bottom right">9+</span>
</button>

With Buttons ​

html
<button>
    <span>Default</span>
    <span class="badge">9+</span>
</button>

With Tabs ​

html
<nav class="tabs">
    <a href="#" class="active">
        <span>Frontpage</span>
    </a>
    <a href="#">
        <span>For You</span>
        <span class="badge">5</span>
    </a>
</nav>