Version 0.40.0

UI Molecules

Tabs

<div class="sui-m-tabs">
    <div class="sui-m-tabs__wrapper">
        <a href="#" class="sui-m-tabs__item as--active">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item as--disabled">
            Tab
        </a>
    </div>
</div>

Small tabs

<div class="sui-m-tabs as--sm">
    <div class="sui-m-tabs__wrapper">
        <a href="#" class="sui-m-tabs__item as--active">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item as--disabled">
            Tab
        </a>
    </div>
</div>

Large tabs

<div class="sui-m-tabs as--lg">
    <div class="sui-m-tabs__wrapper">
        <a href="#" class="sui-m-tabs__item as--active">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item as--disabled">
            Tab
        </a>
    </div>
</div>

Mobile

Tabs fill

Use fill modifier for mobile view, with this method the tabs take all available space.
You can use this method with 3 tabs max with small word.
Use 'as--auto' modifier to have the basic behavior to the desired screen size.
This modifiers can use a responsive suffix.

<div class="sui-m-tabs as--fill as--auto@xs">
    <div class="sui-m-tabs__wrapper">
        <a href="#" class="sui-m-tabs__item as--active">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item as--disabled">
            Tab
        </a>
    </div>
</div>

Tabs overflow

Use overflow modifier for mobile view don't forget to add .sui-m-tabs__wrapper div.
With this method the tabs parent allow user to scroll horizontaly.
Use as--auto modifier to have the basic behavior to the desired screen size.
This modifiers can use a responsive suffix.

<div class="sui-m-tabs as--overflow as--auto@xs">
    <div class="sui-m-tabs__wrapper">
        <a href="#" class="sui-m-tabs__item as--active">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item as--disabled">
            Tab
        </a>
    </div>
</div>

Advanced example

<div class="sui-m-tabs as--overflow as--fill@xs as--auto@sm">
    <div class="sui-m-tabs__wrapper">
        <a href="#" class="sui-m-tabs__item as--active">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item">
            Tab
        </a>
        <a href="#" class="sui-m-tabs__item as--disabled">
            Tab
        </a>
    </div>
</div>