Usage
<ul class="c_h-tabs">
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--orange c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--green">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--purple">Tab</a>
</li>
</ul>Implementation
| Type | Name |
|---|---|
| Elements | |
| Wrapper | .c-tabs |
| Tab | .c-tab |
| Modifiers | |
| Color | .c_h-tabs__tab--blue --green --orange --purple --red --teal --yellow |
| State | |
| Active | .c-tabs__tab--active |
Modifiers
Color
Use c_h-tabs__tab--{color} to set the color of the tab. The color is only visible if the tab is active.
<ul class="c_h-tabs">
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--blue c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--green c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--orange c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--purple c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--red c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--teal c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--yellow c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--pink c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--hot-pink c_h-tabs__tab--active">Tab</a>
</li>
</ul>States
Active
Use c_h-tabs__tab-active to set a tab as active.
<ul class="c_h-tabs">
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--orange c_h-tabs__tab--active">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--green">Tab</a>
</li>
<li>
<a href="#tabs" class="c_h-tabs__tab c_h-tabs__tab--purple">Tab</a>
</li>
</ul>