# Tabs

**Tabs** provide an organized way to present and navigate between different content sections within a single view. Users can switch between sections by clicking tab headings, making navigation easier and improving content organization.

## Style settings

<table><thead><tr><th width="182">Property</th><th>Description</th></tr></thead><tbody><tr><td>Type</td><td><p>Select tab style type:</p><ul><li>Solid</li><li>Splitted</li></ul></td></tr><tr><td>Rounding</td><td>Adjust corner radius of tabs</td></tr><tr><td>Display border</td><td>Toggle border visibility around tabs and content area (Yes/No)</td></tr><tr><td>Border color</td><td>Set the color for borders</td></tr><tr><td>Thickness</td><td>Adjust border thickness</td></tr><tr><td><strong>Tabs</strong></td><td></td></tr><tr><td>Position</td><td><p>Choose tab placement:</p><ul><li>Top</li><li>Left</li><li>Right</li></ul></td></tr><tr><td>Sizing</td><td><p>Set how tabs adapt to their content:</p><ul><li>Adaptive</li><li>Fixed</li></ul></td></tr><tr><td>Background color<br></td><td>Define the background color for tabs</td></tr><tr><td>Hover color</td><td>Set the color that appears when users hover over tabs</td></tr><tr><td>Select color<br></td><td>Define the color for the currently selected tab</td></tr><tr><td>Display divider<br></td><td>Toggle visibility of separators between tabs (Yes/No)</td></tr><tr><td>Divider color<br></td><td>Set the color for dividers between tabs</td></tr><tr><td>Thickness<br></td><td>Set the thickness of the divider</td></tr><tr><td><strong>Content area</strong></td><td></td></tr><tr><td>Background color</td><td>Set the background color for the content display area</td></tr><tr><td><strong>Effects</strong></td><td></td></tr><tr><td>Tabs shadow</td><td><p>Add and configure shadow effects for the tabs component: </p><ol><li>Click the "+" icon to add shadow effects.</li><li>Select from shadow styles: None, Soft, Regular, or Retro.</li></ol></td></tr><tr><td><strong>Navigation buttons</strong></td><td></td></tr><tr><td>Display button</td><td>Toggle visibility of navigation buttons (Yes/No)</td></tr><tr><td>Background color<br></td><td>Set the background color for navigation buttons</td></tr><tr><td>Hover color</td><td>Define the color that appears when hovering over navigation buttons</td></tr><tr><td>Icon color<br></td><td>Set the color for navigation icons</td></tr><tr><td>Previous icon upload<br></td><td>Upload a custom icon for the previous navigation button</td></tr><tr><td>Next icon upload</td><td>Upload a custom icon for the next navigation button</td></tr><tr><td><strong>Margins</strong></td><td></td></tr><tr><td>Tab paddings</td><td>Set internal spacing for tab headings (top, right, bottom, left)</td></tr><tr><td>Content paddings<br></td><td>Set internal spacing for the content area (top, right, bottom, left)</td></tr></tbody></table>

## Typography settings

Use Rich-text on the Typography tab to apply specific formatting to selected text within tabs. Changes made here affect only the text in the Tab element:

* Basic
* Headings
* Caption
* List
* Quote
* Link

For details on how to configure parameters in rich-text options, see [Typography and fonts](https://help.parta.io/branding/create-branding/typography-and-fonts).