---
name: tabs
url: /tabs
---
Tabs
Basic HTML
You can create automatic tabs with this basic directive:
Tab content 1
Tab content 2
Tab content 3
Tab content 1
Tab content 2
Tab content 3
Advanced HTML
You can create Automatic tabs with displaced tab content with this basic directive:
Sass Mixins
Use our mixins to write your own tab classes.
// This is the container for your tabstrip
.custom-tabs {
@include tabstrip(
$orientation: horizontal, // Can also be vertical
$background: #fff
);
}
// This is an individual tab
.custom-tabs-item {
@include tabstrip-item(
$background: #fff, // Background color
$background-hover: #fff, // Background color on hover
$background-active: #fff, // Background color when active
$color: #000, // Text color
$color-active: #000, // Text color when active
$padding: 1rem
);
}
// This is the container for tab content panes
.custom-tab-content {
@include tab-content(
$padding: 1rem
);
}
// This is an individual tab pane
.custom-tab-content-item {
@include tab-content-item;
}
Sass Variables
You can customize tabs with these variables in the `_settings.scss` file:
$tabstrip-background: transparent;
$tab-title-background: #f4f4f4;
$tab-title-background-hover: smartscale($tab-title-background, 5%);
$tab-title-background-active: #fff;
$tab-title-color: isitlight($tab-title-background);
$tab-title-color-active: $tab-title-color;
$tab-title-padding: $global-padding;
$tab-content-padding: $global-padding;