Tabs
The tab component allows you to display a simple menu, containing several tabs. Different shapes and colours are available.
<div class="ms-tab">
<ul>
<li><a href="#" class="ms-active">Soccer</a></li>
<li><a href="#">Basket-ball</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">VTT</a></li>
<li><a href="#">Baseball</a></li>
</ul>
</div>
Different colors are available. These change the color of the active tab as well as the color of the hover.
<div class="ms-tab ms-info">
...
</div>
<div class="ms-tab ms-success">
...
</div>
<div class="ms-tab ms-error">
...
</div>
<div class="ms-tab ms-warning">
...
</div>
Full width
The classe ms-fullwidth
allows you to take the entire width of the container.
For more informations on the icons used, consult the dedicated page.
<div class="ms-tab ms-fullwidth ms-info">
<ul>
<li><a href="#"><i class="fas fa-igloo"></i> Home</a></li>
<li><a href="#" class="ms-active"><i class="far fa-file-word"></i> Doc</a></li>
<li><a href="#"><i class="far fa-envelope"></i> Contact</a></li>
</ul>
</div>
Logo
To customize the tabs with your logo, the .ms-logo
classe allows you to display an image.
<div class="ms-tab ms-error">
<ul>
<li class="ms-logo"><a href="#"><img src="/img/logo.png" alt="Logo"></a></li>
<li><a href="#" class="ms-active">Soccer</a></li>
<li><a href="#">Basket-ball</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">VTT</a></li>
<li><a href="#">Baseball</a></li>
</ul>
</div>