# 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 | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.brickspacelab.com/keystone/sections/content-and-media/tabs.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.