Content Controls
Content
This section is all about managing the content within your tabs. You can add, remove, or modify individual tabs, including their icons, titles, and content. Additionally, you can set which tab should be active by default when the page loads.
- Tabs – Manage the individual tabs in your tab set.
- Icon – Choose an icon to represent or complement the content of this tab.
- Title – Set the title of this tab; this is what users will click on to open the tab.
- Content – Add and format the content that will be displayed when this tab is active.
- Active Tab – Decide which tab is open by default when the page initially loads.
Design Controls
Tabs
Here, you’ll find a variety of settings to adjust the appearance and layout of your tabs. Switch between vertical and horizontal layouts, tweak styles and positions, and manage spacing to ensure your tabs look perfect and are easy to interact with.
- Vertical – Switch between a horizontal and vertical layout for your tabs.
- Horizontal At – Decide from which screen size the tabs should be displayed horizontally. This option is available only when the tabs are set to a vertical layout.
- Style – Choose a general style for your tabs, which affects how they appear and interact with other page elements.
- Position – Adjust the position of your tabs. This control offers different settings based on whether your tabs are in a vertical layout or not.
- Space Between – Control the space between individual tabs. This option is available unless the position is set to inherit or the style is set to bar.
- Space After – Adjust the space after your tabs. This option is not available if the position is set to inherit.
- Bar – Style the bar in bar-styled tabs. This section appears when the tab style is set to bar.
- Separator – Choose a color for the separators in the bar.
- Radius – Adjust the radius of the bar’s corners.
- Shadow – Add a shadow to the bar for extra depth and prominence.
- Pill Radius – Adjust the corner radius of your tabs when they are set to the pill style. This option is available only when the tab style is set to pills.
- Separator – Style the separators between tabs when the tab style is set to tabs.
- Color – Choose a color for the separators.
- Width – Set the width of the separators.
- Text – Style the text within your tabs.
- Typography – Adjust font properties, line height, and other text styling options.
- Hover – Choose a text color for when a user hovers over a tab.
- Active – Set the text color for the active tab.
- Background – Set background colors for your tabs.
- Inactive – Choose a background color for inactive tabs.
- Hover – Set a background color for when a user hovers over a tab.
- Active – Choose a background color for the active tab.
- Underline – Customize the underline effect for your tabs. This section is not available when the tab style is set to pills.
- Hover – Set an underline color for when a user hovers over a tab.
- Active – Choose an underline color for the active tab.
- Width – Adjust the width of the underline.
- Radius – Round the corners of the underline with this setting.
- Padding – Control the padding inside your tabs.
- Vertical – Adjust the vertical padding.
- Horizontal – Adjust the horizontal padding.
- Icon – Manage how icons within your tabs are displayed.
- Size – Adjust the size of the icon. This control is available only when the icon alignment is not set to none.
- Nudge – Fine-tune the icon’s position.
- Nudge X – Move the icon horizontally to get the perfect alignment.
- Nudge Y – Shift the icon vertically for better positioning.
- After Icon – Define the space after the icon to ensure it doesn’t appear too close to the following content.
- Responsive – Tailor your tabs for different devices and screen sizes.
- Show as Dropdown – Choose whether to display the tabs as a dropdown on smaller screens.
- Visible At – Select the screen size at which the tabs should switch to a dropdown. This option is available only when “Show as Dropdown” is enabled.
- Dropdown Styles – Customize the appearance of your dropdown.
- Background – Set the dropdown’s background color for a seamless integration with your site’s design.
- Borders – Refine the dropdown’s borders.
- Radius – Round the corners of the dropdown for a softer look.
- Styling – Define the border color, width, and style.
- Shadow – Add a shadow for depth and prominence.
- Padding – Adjust the space inside the dropdown for better content visibility.
- Padding – Control the padding on all sides of the dropdown content.
- Typography – Style the text within the dropdown for better readability.
- Show Affordance – Enable visual cues that indicate the tabs can be interacted with. This option is available only when “Show as Dropdown” is not enabled.
- Color – Set the color of the visual cues. This option is available only when “Show Affordance” is enabled.
- Transition Effect – Customize the animation effect when switching between tabs for a smoother user experience.
Content
Within the Content section, you can manage how your tabs function and what they contain. This includes adding, modifying, or removing tabs, as well as setting the default active tab. You can also customize the icons, titles, and content for each tab, providing a tailored user experience.
Size
The Size section is devoted to adjusting the overall dimensions of your tabs element. Here, you can manipulate the width of the tabs, ensuring they fit perfectly within your webpage layout and align according to your design preferences.
- Width – Control the width of the tabs element for a precise fit within your layout.
Spacing
Spacing is crucial for creating a balanced and visually appealing design. In this section, you can manage the margins around your tabs element, ensuring it has the right amount of space above and below. This helps in achieving a harmonious look and feel for your webpage.
- Wrapper – Adjust the surrounding space of the entire tabs element.
- Margin Top – Add space above the tabs element to prevent it from appearing cramped.
- Margin Bottom – Insert space below the tabs element for a balanced separation from other content.
