Tabs
Switch between related descriptions and their images or videos.
Code name: Tab · Category: Collections
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use tabs for a small set of service features or process stages. Each item has a label, description and media source.
In the editor
- Add each tab’s title, description and media.
- Choose the tab style.
- Select every tab in preview, including on mobile.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Tab data={[{ id: 1, title: "Discover", description: "Understand your priorities.", src: "/defaults/image_placeholder.svg" }]} />Behaviour and limitations
- The JSX name is Tab. Content belongs in data, with id, title, description and src.
- Keep at least one item. The renderer selects the first item initially.
- Preserve a tab’s src when only its words should change.
Content model
Edit tab labels, descriptions, and media inside data. Preserve src unless the user asks to change the media.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
data | array | [{"id":1,"title":"Text","description":"Describe in short main benefits.","src":"/defaults/image_placeholder.svg"},{"id":2,"title":"Text","description":"Describe in short main benefits.","src":"/defaults/image_placeholder.svg"},{"id":3,"title":"Text","description":"Describe in short main benefits.","src":"/defaults/video-default.mp4"}] (renderer) | Content Data. See the usage notes for this block. |
height | number | 450 (renderer) | Height. See the usage notes for this block. |
muted | boolean | true (renderer) | Muted. See the usage notes for this block. |
playing | boolean | false (renderer) | Auto play. See the usage notes for this block. |
loop | boolean | false (renderer) | Loop. See the usage notes for this block. |
videoControls | boolean | true (renderer) | Display video controls. See the usage notes for this block. |
enableDescriptionCollapse | boolean | true (renderer) | Collapse description. See the usage notes for this block. |
tabStyle | "card", "tab" | "card" (renderer) | Tab Style. See the usage notes for this block. |
cardRounding | number | 24 (renderer) | Card Rounding. See the usage notes for this block. |
tabColor | "primary", "secondary", "black", "white", "inherit" | "inherit" (renderer) | Tab Color. See the usage notes for this block. |
backgroundColor | See guidance | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
