Tabs
Simple responsive horizontal and vertical tabs to display multiple contents.
Default tab
Tab one
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, aut autem commodi deleniti dolore dolorum error esse nemo nulla, provident quibusdam repudiandae sunt tempora vitae voluptas voluptate! Accusamus, minima.
<div class="tabs-wrapper">
<ul class="tabs-lists">
<li><a href="#!" class="tab-link is-active">...</a></li>
<li><a href="#!" class="tab-link">Tab two</a></li>
<li><a href="#!" class="tab-link">...</a></li>
</ul>
<div class="tabs-content">
<div class="tab-content">
...
</div>
<div class="tab-content">
...
</div>
<div class="tab-content">
...
</div>
</div>
</div>
Underline tab
Just add the class is-underline next to tabs-wrapper class in tag div.
Tab one
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, aut autem commodi deleniti dolore dolorum error esse nemo nulla, provident quibusdam repudiandae sunt tempora vitae voluptas voluptate! Accusamus, minima.
<div class="tabs-wrapper is-underline">
...
</div>
Left border tab
Just add the class is-left-border next to tabs-wrapper class in tag div.
Tab one
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, aut autem commodi deleniti dolore dolorum error esse nemo nulla, provident quibusdam repudiandae sunt tempora vitae voluptas voluptate! Accusamus, minima.
<div class="tabs-wrapper is-left-border">
...
</div>
Semi transparent tab
Just add the class is-semi-transparent next to tabs-wrapper class in tag div.
Tab one
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, aut autem commodi deleniti dolore dolorum error esse nemo nulla, provident quibusdam repudiandae sunt tempora vitae voluptas voluptate! Accusamus, minima.
<div class="tabs-wrapper is-semi-transparent">
...
</div>
Rounded tab
Just add the class is-rounded next to tabs-wrapper class in tag div.
Tab one
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, aut autem commodi deleniti dolore dolorum error esse nemo nulla, provident quibusdam repudiandae sunt tempora vitae voluptas voluptate! Accusamus, minima.
<div class="tabs-wrapper is-rounded">
...
</div>
Clean underline tab
Just add the class clean-underline next to tabs-wrapper class in tag div.
Tab one
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, aut autem commodi deleniti dolore dolorum error esse nemo nulla, provident quibusdam repudiandae sunt tempora vitae voluptas voluptate! Accusamus, minima.
<div class="tabs-wrapper clean-underline">
...
</div>