Tab | Containers | Themekit

Preview

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatemo. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet seduis nostrud exercitation diam ad minim veniam, quis nostrud exercitation voluptua.

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatemo. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet sed diam voluptua. Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erato. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amete.

Usage

<div class="tab-box" data-tab-anima="fade-in">
    <ul class="tab-nav">
        <li class="active"><a href="#">Tab name</a></li>
        <li><a href="#">Tab name</a></li>
        <li><a href="#">Tab name</a></li>
    </ul>
    <div class="panel active">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
</div>

<div class="tab-box tab-icon" data-tab-anima="fade-in">
    <ul class="tab-nav">
        <li class="active"><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
        <li><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
        <li><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
    </ul>
    <div class="panel active">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
</div>

<div class="tab-box tab-inverse" data-tab-anima="fade-in">
    <div class="panel active">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
    <ul class="nav tab-nav">
        <li class="active"><a href="#">Tab name</a></li>
        <li><a href="#">Tab name</a></li>
        <li><a href="#">Tab name</a></li>
    </ul>
</div>

<div class="tab-box tab-vertical" data-tab-anima="fade-in">
    <ul class="tab-nav">
        <li class="active"><a href="#">Tab name</a></li>
        <li><a href="#">Tab name</a></li>
        <li><a href="#">Tab name</a></li>
    </ul>
    <div class="panel active">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
</div>

<div class="tab-box tab-icon tab-vertical" data-tab-anima="fade-in">
    <ul class="tab-nav">
        <li class="active"><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
        <li><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
        <li><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
    </ul>
    <div class="panel active">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
</div>

<div class="tab-box tab-icon tab-vertical tab-inverse" data-tab-anima="fade-in">
    <div class="panel active">

    </div>
    <div class="panel">

    </div>
    <div class="panel">

    </div>
    <ul class="tab-nav">
        <li class="active"><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
        <li><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
        <li><a href="#"><i class="im-paper-plane"></i>Tab name</a></li>
    </ul>
</div>

Installation

<script src="themekit/scripts/tab-accordion.js"></script>

Settings

Name	Type	Description
Animations	Attribute	Add the attribute `data-tab-anima="animation-name"` to the component to apply an animation when the tab change. For the animations list and for more details visit the animations page.
Icon tab	--	Add the class `tab-icon` to the component and insert into each nav item the code `<i class="icon-name"></i>`. For the icons list and for more details visit the icons page.
Inverted tab	--	Add the class `tab-inverse` to the component and move the navigation block on bottom, after the panels.
Menu alignment	--	Add the class `align-right` or `align-center` to the <tab-nav> ... </tab-nav> menu to align it on right or on center.

Animations

Icons

Preview

Usage

Installation

Settings

Related content