Using

Tabs are a group of sections with content.
Only one of the tabs is always opened. Tabs can be switched by click.

Tabs Style

Three styles are available:

Default

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Outlined

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Underlined

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Tabs stretching

You can stretch tabs across the entire width of the section.

Отображение по умолчанию

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Параметр Растянуть активирован

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Other tab settings

For each tab you can add an icon before the title or after.

You can select the tab that will be opened when the page loads.

Icon before the title
Icon after the title
This tab is a link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This tab is opened when the page loads.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Instead of opening a tab by clicking, you can configure following a link.

You can adjusts the text alignment for tab content.

Left
Center
Right
Justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis. Donec enim diam vulputate ut pharetra sit amet aliquam id. Commodo nulla facilisi nullam vehicula ipsum a arcu. Sit amet dictum sit amet justo. Lacus sed viverra tellus in. Metus dictum at tempor commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis. Donec enim diam vulputate ut pharetra sit amet aliquam id. Commodo nulla facilisi nullam vehicula ipsum a arcu. Sit amet dictum sit amet justo. Lacus sed viverra tellus in. Metus dictum at tempor commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis. Donec enim diam vulputate ut pharetra sit amet aliquam id. Commodo nulla facilisi nullam vehicula ipsum a arcu. Sit amet dictum sit amet justo. Lacus sed viverra tellus in. Metus dictum at tempor commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis. Donec enim diam vulputate ut pharetra sit amet aliquam id. Commodo nulla facilisi nullam vehicula ipsum a arcu. Sit amet dictum sit amet justo. Lacus sed viverra tellus in. Metus dictum at tempor commodo.