Skip to content
Tab
Overview
A flexible container component that provides customizable tab layout options for child blocks. Ability to show multiple containers that can be toggled with tabs. Uses Alpine.js for tab switching functionality with smooth transitions between tab content.
Common use cases
- Organize content into multiple tabbed sections
- Create product detail tabs (description, specifications, reviews)
- Display different content views that can be toggled
- Group related information into separate tab panels
- Use for FAQ sections or multi-step content organization
Compatible blocks
The following blocks can be nested within this block:
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals visibility, load animation, and scroll animation | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Tabs | Comma-separated list of tab names (e.g., "Tab 1, Tab 2, Tab 3") | Text input |
Spacing
| Setting | Description | Options |
|---|---|---|
| Top spacing | Padding space at the top of the container | 0 - 300 px (default: 0) |
| Bottom spacing | Padding space at the bottom of the container | 0 - 300 px (default: 0) |
| Enable internal padding | Adds horizontal padding inside the tab header | Checkbox (default: false) |
| Gap size | Controls spacing between tab buttons | • None |
Color
| Setting | Description | Options |
|---|---|---|
| Color scheme | Controls the background and text colors for the tab header | • Body |
| Color border | Controls the border color | • Subtle (default) |
Style
| Setting | Description | Options |
|---|---|---|
| Font family | Font family for tab button text | • Standard |
| Font size | Font size for tab button text | • Smaller |
| Border position | Controls where borders appear | • None (default) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |
| Load animation | Animation when the block first loads | • None (default) Visible when Show advanced settings is on and Scroll animation is None |
| Scroll animation | Adds scroll-triggered animations | • None (default) Visible when Show advanced settings is on and Load animation is None |