Page Structure:
Overview
The Tabbed Content block organizes content into switchable panels. Each tab can hold structural blocks (Section, Columns, Hero) giving authors full layout control within each tab.
Tabs follow WAI-ARIA best practices: arrow keys cycle between tabs, Home/End jump to first/last, and screen readers announce proper roles.
Config
tab_alignment: align tabs left (default), center, or right.
active_color: hex color for the active tab underline and text.
default_tab: zero-based index of which tab to show initially.
border_width: "content" (default) constrains the bottom border to content width, "full" spans the full page width.
analytics_label: label for analytics events within this block.
id: HTML id for anchor link targeting.
Examples
Basic three-tab setup
A hero inside a tab
This panel holds a hero block. Tabs can contain structural blocks like heroes, sections, and columns, so each panel gets full layout control.
Tabs with Columns inside
Left column
This tab holds a columns block. Content on this side flows independently from the right.
Right column
On smaller screens these two columns stack vertically.
Center-aligned with custom color and full-width border
First panel
These tabs are center-aligned with a custom active color and a full-width bottom border.
Tabs with embedded video (two-column layout)
Big Buck Bunny
This tab demonstrates an embedded video alongside descriptive text using a two-column layout inside tabbed content.
The video on the left uses an HTML block with a responsive iframe wrapper, while this column uses a standard text block.