Tabs

Tabs displays a set of labelled panels with rich-text content. Use it to organize related information that does not need a separate page for each section.

Add and configure Tabs

1. Click Add, choose Tabs, and place it in the container.
2. Populate Content > Content > Tabs, including each item's Title, Icon, and Content.
3. Set Active Tab and review Open On Hover.
4. Configure Design > Tabs, Content, Size, and Spacing.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Tabs	Add, edit, remove, and reorder tabs.	Shared
Tabs > Icon	Icon.	Shared
Tabs > Title	Item title.	Shared
Tabs > Content	Edit the formatted content.	Shared
Active Tab	Set the numeric active tab value.	Shared
Open On Hover	On/off.	Shared

Design > Tabs

Setting	Purpose and options	Behavior
Vertical	On/off.	Shared
Tabs Width	Tabs width and unit. When: Vertical is set.	Responsive
Horizontal At	Breakpoint. When: Vertical is set.	Shared
Style	Tabs, Pills, Bar.	Shared
Position	Left, Right. When: Vertical is set.	Shared
Position	Left, Center, Right, Full Width. When: Vertical is unset.	Shared
Space Between	Space between and unit. When: Position ≠ Full Width or Style ≠ Bar.	Shared
Space After	Space after and unit. When: Position ≠ Full Width.	Responsive

Shown when Style = Bar.

Setting	Purpose and options	Behavior
Bar > Separator	Color or supported fill.	Shared
Bar > Radius	Radius and unit.	Shared
Bar > Shadow	Shadow offset, blur, spread, color.	Shared

Setting	Purpose and options	Behavior
Pill Radius	Pill radius and unit. When: Style = Pills.	Shared
Separator > Color	Color or supported fill. When: Style = Tabs.	Shared
Separator > Width	Width. When: Style = Tabs.	Shared
Text > Typography	typography controls.	See linked controls
Text > Hover	Color or supported fill.	Shared
Text > Active	Color or supported fill.	Shared
Background > Inactive	Color or supported fill.	Shared
Background > Hover	Color or supported fill.	Shared
Background > Active	Color or supported fill.	Shared

Shown when Style ≠ Pills.

Setting	Purpose and options	Behavior
Underline > Hover	Color or supported fill.	Shared
Underline > Active	Color or supported fill.	Shared
Underline > Width	Width.	Shared
Underline > Radius	Radius and unit.	Shared

Setting	Purpose and options	Behavior
Padding > Vertical	Vertical and unit.	Shared
Padding > Horizontal	Horizontal and unit.	Shared
Icon > Size	Size and unit. When: Align ≠ none.	Shared
Icon > Nudge > Nudge X	Nudge x and unit.	Shared
Icon > Nudge > Nudge Y	Nudge y and unit.	Shared
Icon > After Icon	After icon and unit.	Shared
Responsive > Show as Dropdown	On/off.	Shared

Shown when Show as Dropdown is set.

Setting	Purpose and options	Behavior
Responsive > Visible At	Breakpoint.	Shared
Responsive > Dropdown Styles > Background	Color or supported fill.	Shared
Responsive > Dropdown Styles > Borders	borders controls.	See linked controls
Responsive > Dropdown Styles > Padding	spacing controls.	See linked controls
Responsive > Dropdown Styles > Typography	typography controls.	See linked controls

Setting	Purpose and options	Behavior
Responsive > Show Affordance	On/off. When: Show as Dropdown is unset.	Shared
Responsive > Color	Color or supported fill. When: Show Affordance is set.	Shared
Transition Effect	Transition effect and unit.	Shared

Design > Content

Setting	Purpose and options	Behavior
Content	typography controls.	See linked controls

Design > Size

Setting	Purpose and options	Behavior
Width	Width.	Responsive

Design > Spacing

Setting	Purpose and options	Behavior
Wrapper	spacing controls.	See linked controls

Troubleshooting