Tabs are containers that show content panes when its menu item is selected

Tab One

Tab Content One

Tab Two

Tab Content Two

Tab Three

Tab Content Three

Sass Configuration:

Name Type Default Description
$tab-bg-color Color white Tab active item & content background color
$tab-link-color Color black Tab navigation link color
$tab-link-hover-color Color palette(primary, dark) Tab link hover color
$tab-radius Boolean True Choose whether to add Tab border radius

Example Code:

<!-- Tab Container -->
<div class="tabs">
    <!-- Tab 1 -->
    <div class="tab">
        <!-- Tab Toggle -->
        <a class="tab-button" href="#" role="tab">Tab One</a>
        <!-- Tab Panel -->
        <div class="tab-content" role="tabpanel">
            <h4>Tab Content One</h4>
        </div>
    </div>

    <div class="tab">
        <a class="tab-button" href="#" role="tab">Tab Two</a>
        <div class="tab-content" role="tabpanel">
            <h4>Tab Content Two</h4>
        </div>
    </div>
</div>