Tabs
A tabbed container: you write page content inside it, and each Tab macro you place starts a new tab.
Reach for this when one page has to serve several audiences or several stages, such as Overview, Setup and Troubleshooting, or one tab per environment. Readers jump straight to their part instead of scrolling past everyone else's. Place the Tabs macro on the page, then inside its body place a Tab macro to name each tab and write that tab's content underneath it. Anything can go inside a tab: text, tables, images, even other macros. The tab strip is fully styleable too: four header styles, three sizes, brand colours for the active and inactive tabs, and an optional border around the whole thing.
#See it
Every example below is a real macro on this page, not a screenshot, and each one uses settings taken from a page somebody actually built. Click through the tabs to see how each one behaves.
#Solid, vertical, left
This is tab 1
This is tab 2
This is tab 3
#Solid, horizontal, left
Welcome aboard!
You can include formatting, tables and images, panels etc.
Here is a panel
Table | Table | Table |
|---|---|---|
This is some more text
Other macros work inside a tab too, like these cards.
You can include macros like diagrams within tabs.
We’re a small, cross‑functional team focused on making complex tasks simple. Our aim is to deliver clear, reliable solutions that help people get work done with confidence.
This is a tab with some text inside it.
#Solid, horizontal, small, theme colours
This is tab 1
This is tab 2
This is tab 3
#Settings
Setting | Values | What it changes |
|---|---|---|
Tabs Alignment | Left, Center, Right | Where the tab strip sits above the panel. |
Show Container | On / Off | Draws a border around the whole tab group. |
Tabs Orientation | Horizontal, Vertical | Horizontal puts the tab strip above the content. Vertical puts it in a sidebar down the left, at least 200px tall. |
Tab style | Underline, Pills, Enclosed, Solid | How the tab headers look. Solid fills the active tab with a block of colour and makes it bold. Pills looks like a segmented control. Underline is a flat strip with a coloured line under the active tab. Enclosed gives the active tab a folder-tab outline. |
Tab size | Small, Medium, Large | Padding and font size of the tab headers. |
Active | A brand-palette colour or custom hex. Leave empty to use the theme colour. | Colour of the selected tab. For Underline and Enclosed this is the text and underline colour. For Solid it is the colour of the label sitting on the fill. |
Inactive | A brand-palette colour or custom hex. Leave empty to use the theme colour. | Colour of the tabs that are not selected. |
Tab background | A brand-palette colour or custom hex. Leave empty to use the theme highlight. | Fills the selected tab. Used most by the Solid style; on the other styles it tints the active tab. |
Tab corner radius | 0 to 24px (slider) | Rounds the corners of each tab header. |
Corner radius | 0 to 24px (slider) | Rounds the corners of the outer container. You only see it when Show Container is on. You will find it in the Container section of the Style tab. |
Border colour | A brand-palette colour or custom hex. Leave empty to use the theme border. | Colour of the container border. You only see it when Show Container is on. |
#Related
The two most used macros here.
