Tab teaser

Large viewport

Mobile viewport

Tab teaser turns into accordion

Live example

Created example

How it works

The tab teaser is a container that can include other content components.
On click, the tab changes the entire content within that container.
The height of the content in each tab pushes the underlying content downwards.
The tab navigation must contain at least 2 entries.
- If the available space is too small for all the navigation entries, a tab carousel is displayed showing at least the active tab and the tab control
- In extra small viewport the tab teaser navigation transforms to an accordion
It is possible to define which tab teaser split is opened when a page loads so that it shows the end-user the most interesting part of the component on the initial encounter.
A tab teaser split can have a analytics component tracking

How to use it

Use the tab teaser navigation for items that are closely related.
Keep the content short and mobile in mind.

Note

All content within the tabs is loaded on page load, even if the content is not immediately shown. Therefore, if there are many unseen components within the tabs then the page load speed will be affected.