Tabs
Tabs make it easy for the audience to move between related content sections and displays the content at the same level of hierarchy.
When to use tabs
By default, the first tab item will be open on the page.
Do
- Only use tabs on standard content pages, not full-width pages like landing pages.
- Limit of 7 tabs (technical limit). It is recommended to have a maximum of 5 tabs if possible.
- Keep tab item headings short, preferably a single word, that clearly describes the tab content. Limit of 25 characters for tab headings.
- Arrange the tab items in an order that makes sense for the audience, from left to right.
- Use when you would like to display content at the same level of hierarchy.
Don't
- Don't use tabs for important content where important information can be hidden and missed.
- Don't use tabs for content that needs to be viewed at the same time.
- Don't use with very short content, consider using lists or paragraphs.
- Don't use very long headings. Limit of 25 characters for tab headings.
- Don't use for very long content where the physical tabs become lost.
- Don't use for content where users are likely to want to compare information across multiple tabs.
How to add tabs to a standard page
- From drop down Add Accordion/Tabs
- Type = Tabs
- Give your tabs a descriptive Heading (optional). Recommended limit of 50 characters.
- Select the heading Type:
- H2
- The option – Excluded from in-page navigation – displays when you select the H2
- H3
- H4
- H5
- H2
- Overview (optional) - include a brief overview of the tabs block and its content.
- Add tab item
- Give your tab item a short Heading / label. Limit of 25 characters for tab headings.
- Add the tab item content in the Body / WYSIWYG editor, as you would for general content.
- Add another Tab item.
- Continue adding tab items until you have created your tabs block.
- Save your page to display the tabs block.
How to add tabs to a landing page
- Click the Add block button.
- Click Create content block and select Tabs.
- Give your first tab item a short Tab title, which will be the heading for the tab. Limit of 25 characters for tab headings.
- Add the tab item content in the Body / WYSIWYG editor, as you would for general content.
- Click the Add tabbed content item button to add more tabs. Enter a Tab title and Body description for every tab you create. Continue adding tab items until you have created your tabs block.
- Click the Add block button.
How tabs display
Heading (optional)
Overview (optional) is created in a WYSIWYG editor as for general content.
Tab one contains an icon that should be relevant to the content within the tab.
The content and can be structured as:
- a list
- a sentence
- any other type of content formatting that is available in the WYSIWYG editor.
The content within the tabs should have a relationship to one another, such as be part of a series, or related to the same topic.
Heading | Data |
---|---|
Item 1 | Data |
Item 2 | Data |
Item 3 | Data |
Heading and description
Tab four contains content and can be structured as:
- a list
- a sentence
- any other type of content formatting that is available in the WYSIWYG editor.
The content within the tabs should have a relationship to one another, such as be part of a series, or related to the same topic.
Live examples
You can see live examples of how agencies have applied the component to their content.
Switch between tabs and accordions
- Once you have created your tabs block, you can easily check to see how your content displays in the accordion format.
- Open your tabs block and change the Type = Tabs to Type = Accordion.
- Save your page to check how your Tabs content now looks in an Accordion.
- Reverse the process if you wish to keep your content in tabs.
You can only switch between tabs and accordions on standard pages, not landing pages.