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
Type
Select tab style type:
Solid
Splitted
Rounding
Adjust corner radius of tabs
Display border
Toggle border visibility around tabs and content area (Yes/No)
Border color
Set the color for borders
Thickness
Adjust border thickness
Tabs
Position
Choose tab placement:
Top
Left
Right
Sizing
Set how tabs adapt to their content:
Adaptive
Fixed
Background color
Define the background color for tabs
Hover color
Set the color that appears when users hover over tabs
Select color
Define the color for the currently selected tab
Display divider
Toggle visibility of separators between tabs (Yes/No)
Divider color
Set the color for dividers between tabs
Thickness
Set the thickness of the divider
Content area
Background color
Set the background color for the content display area
Effects
Tabs shadow
Add and configure shadow effects for the tabs component:
Click the "+" icon to add shadow effects.
Select from shadow styles: None, Soft, Regular, or Retro.
Navigation buttons
Display button
Toggle visibility of navigation buttons (Yes/No)
Background color
Set the background color for navigation buttons
Hover color
Define the color that appears when hovering over navigation buttons
Icon color
Set the color for navigation icons
Previous icon upload
Upload a custom icon for the previous navigation button
Next icon upload
Upload a custom icon for the next navigation button
Margins
Tab paddings
Set internal spacing for tab headings (top, right, bottom, left)
Content paddings
Set internal spacing for the content area (top, right, bottom, left)
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
Last updated
Was this helpful?