--- name: tabs url: /tabs --- ## Tabs

Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

*** ### Basic HTML You can create Tabs with this basic HTML:
Automatic Tabs ```html
Tab 1
Tab 2
Tab 3
```
Tab 1
Tab 2
Tab 3
***
Automatic Tabs with displaced tab content ```html
Tab 1
Tab 2
Tab 3
```
Tab 1
Tab 2
Tab 3
*** ### Sass Variables You can customize tabs with these variables in the `_settings.scss` file: ```html $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; ```