Sui - Sofia's User Interface

Appearance

Tabs ​

Default ​

html
<nav class="tabs">
    <a href="#" class="active">Home</a>
    <a href="#">For You</a>
    <a href="#">Following</a>
</nav>

Icons ​

html
<nav class="tabs">
    <a href="#" class="active">
        <span class="icon ri-home-4-line"></span>
    </a>
    <a href="#">
        <span class="icon ri-user-follow-line"></span>
    </a>
    <a href="#">
        <span class="icon ri-pages-line"></span>
    </a>
</nav>

Icons + Labels ​

html
<nav class="tabs">
    <a href="#" class="active">
        <span class="icon ri-home-4-line"></span>
        <span>Home</span>
    </a>
    <a href="#">
        <span class="icon ri-user-follow-line"></span>
        <span>Following</span>
    </a>
    <a href="#">
        <span class="icon ri-pages-line"></span>
        <span>Pages</span>
    </a>
</nav>

Stacked ​

html
<nav class="tabs stacked">
    <a href="#" class="active">
        <span class="icon ri-home-4-line"></span>
        <span>Home</span>
    </a>
    <a href="#">
        <span class="icon ri-user-follow-line"></span>
        <span>Following</span>
    </a>
    <a href="#">
        <span class="icon ri-pages-line"></span>
        <span>Pages</span>
    </a>
</nav>

Fullwidth ​

html
<nav class="tabs fullwidth">
    <a href="#" class="active">Home</a>
    <a href="#">For You</a>
    <a href="#">Following</a>
</nav>

Fullwidth Centered ​

html
<nav class="tabs fullwidth centered">
    <a href="#" class="active">Home</a>
    <a href="#">For You</a>
    <a href="#">Following</a>
</nav>

Fullwidth Stretched ​

html
<nav class="tabs fullwidth stretched">
    <a href="#" class="active">Home</a>
    <a href="#">For You</a>
    <a href="#">Following</a>
</nav>