# Tabs ### Section overview The Tabs section creates horizontal tabs that can open different content based on user interaction. It provides a clean way to organize and display multiple types of content within a single section. #### Common use cases * Product information with different tabs for details, shipping, care instructions * FAQ sections with questions organized by categories * Store information with tabs for location, hours, and policies * Multi-step guides or instructions broken into logical sections #### Usage tips * Keep tab names short and descriptive for better mobile display * Limit the number of tabs to 4-5 for optimal user experience * Ensure the most important content appears in the first tab, as it displays by default * Consider mobile layout - tabs stack and scroll horizontally on smaller screens * Use consistent content types within each tab for better user experience ### Section settings | Setting | Description | | -------------------- | -------------------------------------------------------------- | | Tabs | Comma-separated list of tab names | | Heading | Main heading for the section | | Content | Main content text for the section | | Button label | Text for the primary button | | Button URL | Link URL for the primary button | | Top spacing | Space above the section (in pixels) | | Bottom spacing | Space below the section (in pixels) | | Color scheme | Background color theme for the section | | Custom color | Custom background color (if "custom" color scheme is selected) | | Text color | Force light or dark text color | | Border color | Color for section borders | | Button color | Color scheme for the section's button | | Enable color fade | Transitions the background color when scrolling | | Border position | Where to place borders around the section | | X alignment | Horizontal alignment of content (left, center, right) | | Enable margin | Add horizontal margin to the section | | Enable max width | Limit the width of content elements | | Enable split | Split the section into two columns | | Enable split heading | Split the heading from the main content | | Visibility | Control visibility on mobile or desktop devices | ### Block settings #### Heading Creates a title text within a tab. This block is used to add prominent text headings to organize content. | Setting | Description | | ------- | ---------------------------------------- | | Tab | The tab name this block should appear in | | Content | Heading text to display | #### Content Adds rich text content to a tab. This block allows for formatted text with basic HTML elements. | Setting | Description | | ------- | ---------------------------------------- | | Tab | The tab name this block should appear in | | Content | Rich text content to display | #### Buttons Adds one or two buttons to a tab. This block allows for creating call-to-action elements. | Setting | Description | | ---------------------- | ---------------------------------------- | | Tab | The tab name this block should appear in | | Button label | Text for the primary button | | Button URL | Link URL for the primary button | | Button color | Color scheme for the primary button | | Secondary button label | Text for the secondary button | | Secondary button URL | Link URL for the secondary button | | Secondary button color | Color scheme for the secondary button | #### Image Displays an image within a tab. This block allows for visual content to be included in tabs. | Setting | Description | | ------- | ---------------------------------------- | | Tab | The tab name this block should appear in | | Image | The image to display | #### Video Embeds a video within a tab. This block allows for video content with customizable playback settings. | Setting | Description | | ------------------ | ---------------------------------------- | | Tab | The tab name this block should appear in | | Video | The video file to display | | Enable autoplay | Automatically start video playback | | Enable mute toggle | Show a button to toggle audio on/off | | Enable loop | Continuously loop the video | #### Newsletter Adds a newsletter subscription form to a tab. This block is limited to 1 per section. | Setting | Description | | --------------- | ------------------------------------------- | | Tab | The tab name this block should appear in | | Content | Text explaining newsletter benefits | | Button label | Text for the subscribe button | | Disclaimer | Optional legal disclaimer text | | Success message | Message shown after successful subscription | | Button color | Color scheme for the subscribe button | #### Accordion Creates expandable/collapsible content within a tab. This block is useful for FAQs or detailed information. | Setting | Description | | ------------------ | --------------------------------------------------- | | Tab | The tab name this block should appear in | | Heading | Title for the accordion | | Content | Content displayed when the accordion is expanded | | Icon | Optional icon to display with the heading | | Color scheme | Style/color of the accordion | | Use open accordion | Whether the accordion should be expanded by default | #### Discount Displays a discount code with copy functionality within a tab. This block is useful for promotions. | Setting | Description | | ------------ | ---------------------------------------- | | Tab | The tab name this block should appear in | | Content | Descriptive text about the discount | | Code | The discount code customers can copy | | Button color | 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/space/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.