In a nutshell
Tab styling lets you control the visual appearance of each layer within a tab element including its outer container and the panel that displays the active tab's content. The outer container's styling also includes styling properties for the header that holds the tab items and the tab item itself across its Default, Hover, and Active states.

1. Description

The Tab element*link to Tab element doc* is made up of four distinct styling layers, each customized independently through the Style tab of the Properties pane.

2. Style properties

1. Layout*link*
2. Tab Type - Changes the Tab between Horizontal (tab items arranged in a row) and Vertical (tab items arranged in a column) structuring as required.
3. Alignment*link*
   

2.1. Container

The Container wraps the entire Tab element and controls its outermost visual boundary.

1. Background and Image*link*
2. Border*link*
3. Margin*link*
4. Padding*link*
5. Corner Radius*link*
6. Shadow*link*

2.2. Tab Header

The Tab Header is the strip that holds all tab items. Its properties control the appearance of this strip independently from the items within it.

1. Background and Image*link*
2. Border*link*
3. Gap*link below*
4. Margin*link*
5. Padding*link*
6. Corner Radius*link*
7. Shadow

The Tab Header also exposes one property unique to this layer:

Note: Shadow is not available at the Tab Header level. Shadow applies to the full Tab element through the Container layer.

2.3. Tab Item

Tab items are the individual selectable labels within the header. Each tab item can be styled across three interaction states, Default, Hover, and Active. These are accessible through the interactive state tabs at the top of the Tab Item section in the Style pane. The same set of properties is available for all three states, allowing each to have a fully distinct appearance.

State styling applies consistently to all tab items in the component. Individual tab items cannot be styled differently from one another.

1. Font*link*
2. Icon (size, style, color)*link*
3. Background and Image*link*
4. Border*link*
5. Margin*link*
6. Padding*link*
7. Corner Radius*link*
8. Shadow*link*

The Tab Item also exposes one property unique to this layer:

Note: Icon properties are only available when the tab element's chosen preset has a Icon and Text model in it's tab item. When Label Type is Text Only, the Icon row does not appear in the Tab Item section.

2.4. Tab Panel

The Tab Panel is the content area that becomes visible when its corresponding tab is active. It is selected and styled independently from the rest of the tab element. Refer to section 4 for how to target it on the building space.

1. Background*link*
2. Border*link*
3. Margin*link*
4. Padding*link*
5. Corner Radius*link*
6. Shadow*link*

Note: Background image upload is not available at the tab panel level. It is available on the Container, Tab Header, and Tab Item layers.

3. How to set tab styling?

The Tab element and its Tab Panel are selected and styled separately on the building space. The tab's container, tab header, and tab item are all accessed from within the tab element's Style pane.

1. Select the Tab element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
2. Click the Style tab at the top of the pane.
3. The Style pane shows the following sections:
   1. Layout and Tab Type
   2. Container
   3. Tab Header
   4. Tab Item
      Click any section to expand it and set its properties.
4. To style Tab Item states:
   1. Expand the Tab Item section.
   2. Click Default, Hover, or Active to switch between states.
   3. Set the desired properties for each state independently.
5. To style the Tab Panel:
   1. Click directly on the panel area which is the content region below the tab header on the building space. The breadcrumb at the top of the canvas updates to show Tab Panel.
   2. The Properties pane updates to show the tab panel's style pane with its available properties. Click any section to expand it and set its properties.
6. Click Save in the top right corner to ensure the changes are retained.

Note: Layout and Tab Type (orientation and alignment) are set at the top of the Style pane when the Tab element is selected. These control the component's structure rather than its visual appearance and affect how all tab layers are arranged.

4. Applicable elements

Tab styling is available on the following element:

1. Tab

Note: Any element placed inside a Tab Panel can be styled through its own set of individual properties, independent of the Tab element's styling.

5. Points to note

1. Tab Item state styling - The styling for tab items apply to all the items together and not individually. However, they can be styled across the Default, Hover, and Active states separately.
2. Gap serves two different purposes depending on the layer - In Tab Header, Gap controls the spacing between one tab item and the next. In Tab Item, Gap controls the spacing between the icon and the label text within a single tab item.

Explore other properties

1. Alignment
2. Layout
3. Padding
4. Margin
5. Font
6. Background
7. Corner Radius
8. Border
9. Shadow
10. Opacity
11. Image (Fill/Fit/Stretch)
12. Icon (size, style, color)
13. Stack