| Heading | | Description | | Design | | Choose a design for the element. |
| Layout | | Choose the layout of the element. |
| Justify Tabs | | Choose to get tabs stretched over full element width. |
| Tabs Alignment | | Choose tabs alignment. |
| Tab Title Alignment | | Choose how the icon and title are aligned within each tab. "Space Between" pushes them to opposite edges. Leave on "Default" for centered titles on horizontal tabs and start aligned ones on vertical tabs. Most useful together with a minimum tab width, or with justified tabs. |
| Tab Minimum Width | | Set a minimum width for each tab, so tabs with short titles do not end up narrower than the rest. Tabs still grow past it when the title needs more room. Only applies above the tabs mobile breakpoint. Enter value with unit, ex: 200px. Percentages are not supported. Leave empty to disable. |
| Sticky Tabs | | Turn on to have the tabs navigation stick on scroll. Useful for long content. |
| Sticky Tabs Offset | | Controls how far the top of the column is offset from top of viewport when sticky. Use either a unit of measurement, or a CSS selector. |
| Update URL On Tab Change | | Write the selected tab into the page address, so a visitor can copy a link that opens on that tab. The address is replaced rather than added to the browser history, so the back button still leaves the page. |
| Content Transition | | Choose how the tab content changes when a different tab is selected. The outgoing content finishes before the incoming one starts, so the two never overlap. |
| Transition Direction | | Choose which way the incoming content travels, so "Up" means it rises into place from below. |
| Transition Speed | | Controls how long the transition takes, in milliseconds. It applies to the outgoing and the incoming content separately, so the full swap takes twice this. |
| Auto Rotate Tabs | | Automatically switch to the next tab after a set interval, and choose where that happens. On mobile it carries over to whichever mobile mode is set. Rotation starts once the element scrolls into view, pauses on hover and keyboard focus, and is switched off for visitors who prefer reduced motion. |
| Rotation Interval | | Controls how long each tab stays active, in milliseconds. If the tab contents differ a lot in height, set a "Content Height" on the design tab to stop the page from jumping on each switch. |
| Pause On Hover | | Choose to pause the rotation while the mouse is over the element. Rotation always pauses while a tab has keyboard focus. |
| Resume After Interaction | | Choose whether rotation continues after a visitor selects a tab themselves. When set to no, rotation stops for good on the first interaction. |
| Play / Pause Button | | Show a play / pause button above the tabs, so visitors can stop the rotation. Recommended as accessibility aid. |
| Icon | | Global setting for all tabs, this can be overridden individually. Click an icon to select, click again to deselect. |
| Icon Position | | Choose the position of the icon on the tab. Icons can be selected in the general tab for the same icon on all tabs, or in each child item for individual tab icons. |
| Tabs Icon Size | | Set the size of the icon. In pixels, ex: 13px. Icons can be selected in the general tab for the same icon on all tabs, or in each child item for individual tab icons. |
| Element Visibility | | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | | Add a class to the wrapping HTML element. |
| CSS ID | | Add an ID to the wrapping HTML element. |
| Heading | | Description | | Margin | | Enter values including any valid CSS unit, ex: 4%. |
| Tabs Title Tag | | Choose HTML tag of the tabs title, either div or the heading tag, h1-h6. |
| Tabs Title Typography | | Controls the tabs title text typography. |
| Tabs Title Color | | Controls the color of the tabs title. |
| Icon Color | | Set the color of the icon. |
| Tabs Title Padding | | Controls the padding of tabs title, In pixels or percentage, ex: 10px or 10%. |
| Tabs Title Border Radius | | Controls the border radius of tabs title, In pixels or percentage, ex: 10px or 10%. The content panel keeps its own border, which can sit oddly against rounded tabs; set Border Color to transparent to drop it. |
| Tabs Background Gradient | | Set to "Yes" to fill the tabs with a gradient. It is painted over the background color above, so a gradient using transparency blends into that color. |
| Tabs Gradient Start Color | | Select start color for the tab gradient. Leave the active state empty to use the same gradient on every tab. |
| Tabs Gradient End Color | | Select end color for the tab gradient. Leave the active state empty to use the same gradient on every tab. |
| Tabs Gradient Start Position | | Select start position for the tab gradient. |
| Tabs Gradient End Position | | Select end position for the tab gradient. |
| Tabs Gradient Type | | Controls the tab gradient type. |
| Tabs Radial Direction | | Select direction for the radial tab gradient. |
| Tabs Gradient Angle | | Controls the tab gradient angle. In degrees. |
| Tab Description Font Size | | Set the font size of the tab descriptions. Enter value with unit, ex: 14px. Leave empty to use a size relative to the tab title. |
| Tab Description Color | | Controls the color of the tab descriptions. Leave empty to use the active tab title color. |
| Content Height | | Set a fixed height for the tab content area. When the content exceeds this height, a scrollbar will appear. Leave empty to disable. Enter value with unit, ex: 400px. |
| Tabs Content Padding | | Controls the padding of tabs content, In pixels or percentage, ex: 10px or 10%. |
| Content Border Radius | | Controls the border radius of the content panel, in pixels or percentage, ex: 10px or 10%. On the classic design the active tab runs into the top edge of the panel, so rounding only the bottom corners usually reads best there. |
| Content Background Color | | Controls the background color of the content panel. Leave empty for the default, which is the active tab background color on the classic design, so that panel and active tab read as one surface, and no color at all on the clean design. |
| Border Color | | Controls the color of the border around the tab list and the content panel. Set it to transparent to remove those borders, which is often what rounded tabs want. |
| Active Tab Accent Border Color | | Controls the color of the accent edge on the active tab, which only the classic design draws. The rotation progress indicator falls back to it when no color of its own is set. |
| Active Tab Accent Border Size | | Controls the thickness of the accent border on the active tab, in pixels. When auto rotation is enabled, the progress line is drawn along that same border. |
| Rotation Progress Indicator | | Show a progress indicator on the active tab that fills up before the next tab is shown. The classic design uses a bar on the active tab accent edge, the clean design fills the tab itself. |
| Rotation Progress Indicator Style | | Choose whether the progress fills the background of the active tab, or draws a line along its edge. Default uses a line on the classic design, drawn over the accent edge it already has, and a background fill on the clean design. |
| Rotation Progress Line Position | | Choose which edge of the active tab the progress line runs along. Any edge can be used on either tab layout. Default uses the start edge for vertical tabs and the bottom edge for horizontal ones. |
| Rotation Progress Indicator Color | | Set the color of the rotation progress indicator. Leave empty to derive it from the active tab border color, softened so the progress stays readable against it. |
| Rotation Progress Indicator Size | | Set the thickness of the rotation progress line, in pixels. The classic design draws it along the active tab accent border, so it follows "Active Border Size" there. |
