Developers - CSS Layout System
Templates Tabs
Tabs with Underline
This is a tabbed interface where content is organized in multiple tabs, with the option to choose between a basic or fade effect when switching between tabs.
Classes:
sc-lt-slider sc-tp-tabs-auto sc-op-nosb sc-op-fade sc-op-tabs-line
Custom tag:
<inner-section
type="slider"
template="tabs-auto"
options="fade no-scrollbar tabs-line"
></inner-section>
Key for theme.json:
"tabs_auto_line";
Full Width Tabs with Underline
This is a tabbed interface where content is organized in multiple tabs, with the option to choose between a basic or fade effect when switching between tabs.
Classes:
sc-lt-slider sc-tp-tabs-full sc-op-nosb sc-op-fade sc-op-tabs-line
Custom tag:
<inner-section
type="slider"
template="tabs-full"
options="no-scrollbar fade tabs-line"
></inner-section>
Key for theme.json:
"tabs_full_line";
Tabs in Pills
This is a tabbed interface where content is organized in multiple tabs, with the option to choose between a basic or fade effect when switching between tabs.
Classes:
sc-lt-slider sc-tp-tabs-auto sc-op-nosb sc-op-fade sc-op-tabs-pill
Custom tag:
<inner-section
type="slider"
template="tabs-auto"
options="fade no-scrollbar tabs-pill"
></inner-section>
Key for theme.json:
"tabs_auto_pill";
Tabs Bar
This is a tabbed interface where content is organized in multiple tabs, with the option to choose between a basic or fade effect when switching between tabs.
Classes:
sc-lt-slider sc-tp-tabs-auto sc-op-nosb sc-op-fade sc-op-tabs-bar
Custom tag:
<inner-section
type="slider"
template="tabs-auto"
options="fade no-scrollbar tabs-bar"
></inner-section>
Key for theme.json:
"tabs_auto_bar";
Full Width Tabs Bar
This is a tabbed interface where content is organized in multiple tabs, with the option to choose between a basic or fade effect when switching between tabs.
Classes:
sc-lt-slider sc-tp-tabs-full sc-op-nosb sc-op-fade sc-op-tabs-bar
Custom tag:
<inner-section
type="slider"
template="tabs-full"
options="fade no-scrollbar tabs-bar"
></inner-section>
Key for theme.json:
"tabs_full_bar";