Tabs Component
The Tabs component organizes content into interactive tabbed sections. This structure allows readers to navigate between different content panels independently and at their own pace.
Usage & Properties of the Tabs Component
| Parametres |
Values |
| theme |
primary-theme orange-theme green-theme
red-theme blue-theme purple-theme gris-theme
olive-theme gold-theme strawberry-theme
indigo-theme sky-theme yellow-theme
|
| mode |
mode-classic mode-block
|
| box_type |
mini-box container-box container-view
container-large container-full
|
| font |
serif-font-heading serif-font-global sans-serif-font-heading
sans-serif-font-global
|
| layout |
horizontal-version vertical-version
|
Tabs Component in action
Tabs component : Classic Mode
:: tabs{layout="horizontal-version" theme="orange-theme" mode="mode-classic" font="serif-font-heading" align="align-left" box_type="container-full" titles="titles_01||titles_02||titles_03"}
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:: tabs
Tabs component : Block Mode
:: tabs{layout="horizontal-version" theme="blue-theme" mode="mode-block" font="serif-font-heading" align="align-left" box_type="container-full" titles="titles_01||titles_02||titles_03"}
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:: tabs
Tabs component : Vertical layout
:: tabs{layout="vertical-version" theme="blue-theme" mode="mode-classic" font="serif-font-heading" align="align-left" box_type="container-full" titles="titles_01||titles_02||titles_03"}
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:- tab{theme="primary-theme"}
# title of section
Lorem ipsum dolor sit amet.
:- tab
:: tabs
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
