Skip to main content

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";

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_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_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";

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";

tabs_full_bar