---
name: tabs
url: /tabs
title: 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: