> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/layout/custom-tab.md).

# Custom tab

Organize several content panels behind clickable tab labels inside one flexible layout block.

The **Custom tab** block organizes related content into tabbed panels. Use it when you want customers to switch between product highlights, editorial stories, feature comparisons, policies, sizing information, or mixed content groups without stacking every detail on the page at once.

### 1. What you can do

* Add, duplicate, remove, and reorder Tab items
* Rename each tab label from the Tab item settings
* Add reusable content blocks inside each Tab item
* Arrange the tab header and tab content vertically or horizontally on desktop
* Style the tab buttons as classic text, underline tabs, or boxed tabs
* Set custom width, height, background, corner radius, border, padding, and margin
* Use separate height, layout, gap, spacing, and tab-button appearance on mobile

### 2. Understanding the Custom tab structure

The Custom tab uses a built-in header and content area:

```
Custom tab
|-- Tab header
|   |-- Heading group
|   `-- Tab item list
`-- Tab content
    `-- Tab item
```

The **Tab header** holds the optional heading area and the clickable tab labels. The **Tab content** area holds the Tab items. Each **Tab item** controls one tab label and the content shown when that tab is selected.

{% hint style="info" %}
**Note:** The Tab header and Tab content areas are part of the Custom tab structure. Configure them where they appear in the Theme Editor; add or reorder the actual tabs through **Tab item** blocks inside the Tab content area.
{% endhint %}

### 3. How to add a Custom tab

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a custom tab block**

Click **Add block**, then select **Custom tab**.
{% endstep %}

{% step %}
**Edit the tab items**

Open **Tab content**, then edit each **Tab item**.
{% endstep %}

{% step %}
**Set the tab labels**

Set each Tab item's **Label** so the tab button names match the content.
{% endstep %}

{% step %}
**Manage tab items**

Add, remove, duplicate, or reorder Tab items as needed.
{% endstep %}

{% step %}
**Build the content panels**

Add reusable blocks inside each Tab item to build the content panel.
{% endstep %}

{% step %}
**Configure the tab settings**

Set the layout, Tab header, Tab item list, and Tab content style.
{% endstep %}

{% step %}
**Preview the tab interaction**

Check how it works on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Custom tab settings

These settings control the full Custom tab block, including how the built-in Tab header and Tab content area sit together.

<details>

<summary>Size</summary>

<table data-search="false"><thead><tr><th width="100.07421875">Setting</th><th width="135.36328125">Options</th><th width="427.80859375">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the Custom tab to fill the available container width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Height</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> lets the Custom tab height follow its content.</li><li><strong>Fill</strong> stretches it to fill the available height.</li><li><strong>Custom</strong> lets you set an exact height in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a separate mobile <strong>Height</strong>. Mobile custom height uses the same percent or pixel options as desktop.</td></tr></tbody></table>

</details>

<details>

<summary>Inner content layout</summary>

Use these settings to arrange the Tab header and Tab content area inside the full Custom tab block. [Learn how inner content layout settings work](https://ursus-ecom.gitbook.io/arctos-theme/blocks/layout/pages/ABvGsQq7dgOOxcwgztbs#id-3.2.-inner-content-layout).

<table data-search="false"><thead><tr><th width="109.92578125">Setting</th><th width="129.796875">Options</th><th width="423.57421875">What it does</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td><ul><li>Vertical</li><li>Horizontal</li></ul></td><td><ul><li><strong>Vertical</strong> stacks the Tab header above the Tab content.</li><li><strong>Horizontal</strong> places the Tab header and Tab content side by side on desktop.</li></ul><p>On mobile, the Custom tab layout stacks vertically.</p></td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li><li>Space between</li></ul></td><td><em>Controls horizontal distribution when <strong>Direction</strong> is <strong>Horizontal</strong>.</em></td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Center</li><li>Bottom</li></ul></td><td><em>Controls vertical placement when <strong>Direction</strong> is <strong>Horizontal</strong>.</em></td></tr><tr><td><strong>Align baseline</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Aligns the bottom line of text rather than the outer edges of differently sized content. Available when horizontal <strong>Position</strong> is <strong>Bottom</strong>.</td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td><em>Controls horizontal placement when <strong>Direction</strong> is <strong>Vertical</strong>.</em></td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Center</li><li>Bottom</li><li>Space between</li></ul></td><td><em>Controls vertical distribution when <strong>Direction</strong> is <strong>Vertical</strong>.</em></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Sets the spacing between the Tab header and Tab content area.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate mobile alignment, position, and gap values.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

<table data-search="false"><thead><tr><th width="120.4453125">Setting</th><th width="121.703125">Options</th><th width="421.765625">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the Custom tab colors to the section or block it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the Custom tab stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Custom background</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turns on a separate background for the full Custom tab block. Use it when the tabs should read as one grouped panel.</td></tr><tr><td><strong>Background</strong></td><td><ul><li>None</li><li>Color</li></ul></td><td>Chooses whether the custom background is transparent or uses a color. <em>Available when <strong>Custom background</strong> is on.</em></td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Chooses whether the custom background uses one color or a gradient. <em>Available when <strong>Background</strong> is <strong>Color</strong>.</em></td></tr><tr><td><strong>Color code</strong></td><td>Color or gradient picker</td><td>Sets the custom background color or gradient.</td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td>Controls how sharp or rounded the full Custom tab container appears.</td></tr><tr><td><strong>Custom corner</strong></td><td>0-100px</td><td><em>Sets the precise corner radius when <strong>Corner radius</strong> is <strong>Custom</strong>.</em></td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

Spacing controls add room inside or around the full Custom tab block.

<table><thead><tr><th width="111.9609375">Setting</th><th width="100.10546875">Options</th><th width="451.703125">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the Custom tab block, between its edge and the tab header/content areas. Turn it on to reveal top, bottom, left, and right padding controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile padding values from 0-100px. <em>Available when <strong>Padding</strong> is on.</em></td></tr><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space around the Custom tab block to separate it from neighboring blocks. Turn it on to reveal top, bottom, left, and right margin controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile margin values from 0-100px. <em>Available when <strong>Margin</strong> is on.</em></td></tr></tbody></table>

</details>

### 5. Tab header settings

The **Tab header** controls the area that holds the heading group and tab labels. It has its own size, layout, style, border, padding, and margin controls, so you can style the header independently from the full Custom tab block.

<details>

<summary>Size and layout</summary>

<table data-search="false"><thead><tr><th width="111.80078125">Setting</th><th width="134.60546875">Options</th><th width="417.4296875">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td>Sets whether the Tab header fits its content, fills the available width, or uses a custom width. Custom width can use percent or pixel values.</td></tr><tr><td><strong>Height</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td>Sets whether the Tab header height follows its content, fills the available height, or uses a custom height. Custom height can use percent or pixel values.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate mobile width and height controls for the Tab header.</td></tr><tr><td><strong>Direction</strong></td><td><ul><li>Vertical</li><li>Horizontal</li></ul></td><td>Arranges the heading group and tab labels vertically or side by side on desktop. On mobile, the header layout stacks vertically.</td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li><li>Space between</li></ul></td><td><em>Controls distribution when header <strong>Direction</strong> is <strong>Horizontal</strong>.</em></td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Center</li><li>Bottom</li></ul></td><td><em>Controls vertical placement when header <strong>Direction</strong> is <strong>Horizontal</strong>.</em></td></tr><tr><td><strong>Align baseline</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><em>Aligns text baselines when the header is horizontal and <strong>Position</strong> is <strong>Bottom</strong>.</em></td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td><em>Controls horizontal placement when header <strong>Direction</strong> is <strong>Vertical</strong>.</em></td></tr><tr><td><strong>Position</strong></td><td><ul><li>Top</li><li>Center</li><li>Bottom</li><li>Space between</li></ul></td><td><em>Controls vertical distribution when header <strong>Direction</strong> is <strong>Vertical</strong>.</em></td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Sets the spacing between the heading group and the tab labels.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate mobile alignment, position, and gap controls for the header.</td></tr></tbody></table>

</details>

<details>

<summary>Style and spacing</summary>

<table data-search="false"><thead><tr><th width="120.54296875">Setting</th><th width="145.67578125">Options</th><th width="397.76171875">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the Tab header colors to the Custom tab.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme for the header area.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md"><strong>Theme settings > Colors</strong></a>. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Custom background</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a separate background to the Tab header.</td></tr><tr><td><strong>Background</strong></td><td><ul><li>None</li><li>Color</li></ul></td><td>Chooses whether the header background is transparent or uses a color. <em>Available when <strong>Custom background</strong> is on.</em></td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Chooses whether the header background uses one color or a gradient. <em>Available when <strong>Background</strong> is <strong>Color</strong>.</em></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td>Controls how sharp or rounded the Tab header corners appear.</td></tr><tr><td><strong>Show border</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds visible borders to the Tab header. Turn it on to reveal top, bottom, left, and right border-width controls from 0-10px (setting a side to 0px hides that side). Also reveals <strong>Custom color</strong> controls.</td></tr><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the Tab header. Turn it on to reveal top, bottom, left, and right padding controls from 0-200px.</td></tr><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space around the Tab header. Turn it on to reveal top, bottom, left, and right margin controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile padding or margin values from 0-100px when the related spacing control is on.</td></tr></tbody></table>

{% hint style="info" %}
**Note:** The heading group inside the Tab header works like a focused [Group](/arctos-theme/blocks/layout/group.md) containing a Heading block. Edit the heading text and typography in that built-in Heading block.
{% endhint %}

</details>

### 6. Tab item list settings

The **Tab item list** controls the clickable tab labels generated from each Tab item's **Label** setting.

<details>

<summary>Layout</summary>

<table><thead><tr><th width="106.5625">Setting</th><th width="125.08984375">Options</th><th width="432.23046875">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td>Sets whether the tab-label list fits its labels, fills the available width, or uses a custom width.</td></tr><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixel</li></ul></td><td>Selects the unit for custom width. <em>Available when <strong>Width</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Custom width</strong></td><td>0-100% or 0-2000px</td><td>Sets the precise width for the selected unit. <em>Available when <strong>Width</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li><li>Space between</li></ul></td><td>Aligns or distributes the tab labels across the list area.</td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0-32px</li><li>Custom</li></ul></td><td>Sets the spacing between tab labels.</td></tr><tr><td><strong>Custom gap</strong></td><td>0-100px</td><td>Sets a precise pixel gap between tab labels. <em>Available when <strong>Gap</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to configure independent mobile width mode, custom unit, percentage or pixel width, alignment, and gap settings.</td></tr><tr><td><strong>Width (Mobile)</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td>Sets the tab list width mode on mobile screens. <em>Available when <strong>Custom on mobile</strong> is enabled.</em></td></tr><tr><td><strong>Unit (Mobile)</strong></td><td><ul><li>Percent</li><li>Pixel</li></ul></td><td>Selects the unit for mobile custom width. <em>Available when mobile <strong>Width</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Custom width (Mobile)</strong></td><td>0-100% or 0-2000px</td><td>Sets the precise mobile width. <em>Available when mobile <strong>Width</strong> is <strong>Custom</strong>.</em></td></tr><tr><td><strong>Alignment (Mobile)</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Positions tab labels on mobile screens. <em>Available when <strong>Custom on mobile</strong> is enabled.</em></td></tr><tr><td><strong>Gap (Mobile)</strong></td><td><ul><li>Default</li><li>0-32px</li><li>Custom</li></ul></td><td>Sets the mobile gap between tab labels. <em>Available when <strong>Custom on mobile</strong> is enabled.</em></td></tr><tr><td><strong>Custom gap (Mobile)</strong></td><td>0-100px</td><td>Sets a precise mobile gap in pixels. <em>Available when mobile <strong>Gap</strong> is <strong>Custom</strong>.</em></td></tr></tbody></table>

When tab labels exceed the container width on narrow screens or dense layouts, customers can drag or swipe horizontally to access all tabs.

</details>

<details>

<summary>Appearance</summary>

<table data-search="false"><thead><tr><th width="111.671875">Setting</th><th width="149.6796875">Options</th><th width="402.57421875">What it does</th></tr></thead><tbody><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Underline</li><li>Boxed</li></ul></td><td><ul><li><strong>Classic</strong> keeps tab labels simple.</li><li><strong>Underline</strong> uses an underline treatment for the active or interactive label.</li><li><strong>Boxed</strong> places each label inside a stronger button-like shape.</li></ul></td></tr><tr><td><strong>Show divider</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a separating line to classic tab labels. <em>Available when <strong>Style</strong> is <strong>Classic</strong>.</em></td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives boxed tab labels a solid background.</li><li><strong>Outline</strong> shows a border with no solid background.</li></ul><p><em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></p></td></tr><tr><td><strong>Shape</strong></td><td><ul><li>Square</li><li>Rounded</li><li>Pill</li></ul></td><td>Sets the boxed tab-label shape. <em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td><p>Controls how rounded the corners of your frame are.</p><ul><li><strong>Main corner</strong> matches the global corner radius set in your theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> inherit from the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> value and scale it down proportionally for a subtler effect.</li><li><strong>None</strong> removes rounding entirely for a sharp, full-bleed look.</li><li><strong>Custom</strong> lets you set a precise value to match a specific design.</li></ul><p><em>Available when <strong>Style</strong> is <strong>Boxed</strong> and <strong>Shape</strong> is <strong>Rounded</strong>.</em></p></td></tr><tr><td><strong>Text style</strong></td><td><ul><li>H3–H6</li><li>Eyebrow text</li><li>Paragraph</li><li>Custom</li></ul></td><td>Sets the text style for the tab labels. Choose <strong>Custom</strong> when you need direct font family, font size, line height, letter spacing, font weight, and case controls.</td></tr><tr><td><strong>Top and bottom padding</strong></td><td>0-60px</td><td>Adjusts vertical padding for tab labels. <em>Available when <strong>Style</strong> is <strong>Boxed</strong> or <strong>Underline</strong>.</em></td></tr><tr><td><strong>Left and right padding</strong></td><td>0-60px</td><td>Adjusts horizontal padding for boxed tab labels. <em>Available when <strong>Style</strong> is <strong>Boxed</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set separate mobile typography, corner radius, and padding for the tab labels.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="96.0234375">Setting</th><th width="100.20703125">Options</th><th width="467.875">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the Tab item list. Turn it on to reveal top, bottom, left, and right padding controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile padding values from 0-100px. <em>Available when <strong>Padding</strong> is on.</em></td></tr></tbody></table>

</details>

### 7. Tab content and Tab item settings

#### 7.1. Tab content

The **Tab content** area controls the shared frame around the panels that appear when customers select a tab.

<table data-search="false"><thead><tr><th width="137.53515625">Setting</th><th width="139.875">Options</th><th width="448.40234375">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the Tab content colors to the Custom tab.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme for the content panels.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Custom background</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a separate background to the shared Tab content area.</td></tr><tr><td><strong>Background</strong></td><td><ul><li>None</li><li>Color</li></ul></td><td>Chooses whether the content background is transparent or uses a color. <em>Available when <strong>Custom background</strong> is on.</em></td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Chooses whether the content background uses one color or a gradient. <em>Available when <strong>Background</strong> is <strong>Color</strong>.</em></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td><p>Controls how rounded the corners of your frame are.</p><ul><li><strong>Main corner</strong> matches the global corner radius set in your theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> inherit from the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> value and scale it down proportionally for a subtler effect.</li><li><strong>None</strong> removes rounding entirely for a sharp, full-bleed look.</li><li><strong>Custom</strong> lets you set a precise value to match a specific design.</li></ul></td></tr><tr><td><strong>Show border</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds visible borders to the Tab content area. Turn it on to reveal top, bottom, left, and right border-width controls from 0-10px (setting a side to 0px hides that side). Also reveals <strong>Custom color</strong> controls.</td></tr><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the Tab content area. Turn it on to reveal top, bottom, left, and right padding controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile padding values from 0-100px. <em>Available when <strong>Padding</strong> is on.</em></td></tr></tbody></table>

#### 7.2. Tab item

Each **Tab item** controls one tab label and one content panel.

<table><thead><tr><th width="94.546875">Setting</th><th width="99.25390625">Options</th><th width="531.6796875">What it does</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>Text field</td><td>Sets the tab label customers click. Keep labels short so the tab list stays easy to scan on mobile.</td></tr></tbody></table>

Inside each Tab item, click **Add block** to build that tab's content. The Custom tab preset starts with a Heading and Text block inside each Tab item, but you can replace that content with any supported reusable blocks.