# 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         |