Tabbed Content

📖 Overview

The Tabbed Content block organises content into switchable tabs. On desktop, tabs are displayed as clickable buttons; on mobile, a dropdown select is used for better usability. The block includes full keyboard navigation and ARIA attributes for accessibility.

✏️ Content Options

Tabs are managed via a repeater field. Use the “Add Row” button to add as many tabs as needed.

Field	Type	Required	Description
Tab Title	Text	No	The label displayed on the tab button
Content	WYSIWYG Editor	No	Rich text content displayed when the tab is active

🎨 CSS Variables

The following CSS variables can be configured to customise the block’s appearance:

Variable	Default Value
`--block-tabbed-content-tabs-gap`	`5rem`
`--block-tabbed-content-tabs-margin-bottom`	`var(--spacing-m)`
`--block-tabbed-content-tabs-padding-bottom`	`var(--spacing-xs)`
`--block-tabbed-content-tabs-border-top`	`0.1rem solid var(--colour-rgba-brand-3-10)`
`--block-tabbed-content-tabs-border-shadow`	`0 0.3rem 0.6rem 0 var(--colour-rgba-brand-3-30)`
`--block-tabbed-content-tabs-bottom`	`-0.3rem`
`--block-tabbed-content-tabs-height`	`0.1rem`
`--block-tabbed-content-select-margin-bottom`	`var(--spacing-m)`

♿ Accessibility

Uses role="tablist", role="tab", and role="tabpanel" for proper ARIA semantics
Implements aria-selected to indicate the active tab
Uses aria-controls and aria-labelledby to associate tabs with their panels
Supports keyboard navigation between tabs
Mobile dropdown includes a visually hidden label for screen readers