# Tabs ### Section overview The Tabs section creates horizontal tabs that can display different content blocks when selected. It provides a clean, organized way to present multiple information categories within a single section. #### Common use cases * Product information display (specifications, warranty, shipping details) * FAQ or help sections with categorized information * Location and contact information with maps and details * Presenting step-by-step instructions or processes #### Usage tips * Use clear, concise tab names that accurately describe the content * Limit the number of tabs to 3-5 for better usability * For mobile views, consider using the split layout option for better readability * Keep content within each tab focused and consistent in structure across tabs ### Section settings | Setting | Description | | ---------------- | --------------------------------------------------------------------------------- | | Tabs | Comma-separated list of tab names that will be displayed as selectable options | | Heading | Main heading displayed above the tabs | | Content | Rich text content displayed below the heading | | Button label | Text for the optional button | | Button URL | URL for the optional button | | Top spacing | Amount of padding above the section (0-300px) | | Bottom spacing | Amount of padding below the section (0-300px) | | Color scheme | Background and text color combination for the section | | Border color | Color for section borders | | Button color | Color scheme for the section's button | | Border position | Where borders appear on the section (none, top, bottom, or both) | | X alignment | Horizontal alignment of content (left, center, or right) | | Enable margin | When enabled, applies horizontal margin to the section | | Enable max width | When enabled, restricts content width to improve readability | | Enable split | When enabled, displays header and content in a side-by-side layout | | Visibility | Controls section visibility on different devices (all, mobile only, desktop only) | ### Block settings #### Heading A simple text heading block to create section titles within a tab. | Setting | Description | | ------- | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Content | Heading text to display | #### Content A rich text content block for adding formatted text within a tab. | Setting | Description | | ------- | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Content | Rich text content to display | #### Buttons Adds one or two buttons within a tab. | Setting | Description | | ---------------------- | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Button label | Text for the primary button | | Button URL | URL for the primary button | | Color button | Color scheme for the primary button | | Secondary button label | Text for the secondary button | | Secondary button URL | URL for the secondary button | | Secondary color button | Color scheme for the secondary button | #### Image Displays an image within a tab. | Setting | Description | | ------- | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Image | The image to display | #### Video Embeds a video within a tab. | Setting | Description | | ------------------ | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Video | The video to display | | Enable autoplay | When enabled, automatically plays the video when tab is selected | | Enable mute toggle | When enabled, displays a button to toggle video sound | | Enable loop | When enabled, the video will continuously repeat | #### Newsletter Adds a newsletter subscription form within a tab. Limited to 1 per section. | Setting | Description | | --------------- | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Content | Text content displayed above the email input | | Button label | Text for the subscribe button | | Disclaimer | Optional text displayed below the form (privacy policy, etc.) | | Success message | Message shown after successful subscription | | Color button | Color scheme for the subscribe button | #### Accordion Creates an expandable/collapsible content section within a tab. | Setting | Description | | ------------ | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Heading | Title for the accordion | | Content | Rich text content revealed when accordion is expanded | | Icon | Optional icon displayed before the heading | | Color scheme | Color styling for the accordion | | Enable open | When enabled, accordion is expanded by default | #### Discount Displays a discount code with a copy button within a tab. | Setting | Description | | ------------ | -------------------------------------------------------------------------------------- | | Tab | The tab name this block should appear in (must match a tab name from section settings) | | Content | Text content displayed above the discount code | | Code | The discount code customers can copy | | Color button | Color scheme for the copy button |