Layout 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:

• Tab item

Block settings

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 • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Color scheme	Controls the background and text colors for the tab header	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent (default)
Color border	Controls the border color	• Subtle (default) • Strong Visible when border position is not blank

Style

Setting	Description	Options
Font family	Font family for tab button text	• Standard • Heading • Subheading • Accent Visible when font size contains type--
Font size	Font size for tab button text	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only
Scroll animation	Adds scroll-triggered animations	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom