Tabs - Tabbed content

In this article, we will explain how to add and edit your interactive tabbed content.

As any other element, the tab element should follow a hierarchy and, to facilitate responsiveness, remember to have this added to a responsive grid.

So first, navigate to the interactive components section and drag the tabs element to an empty column.

You can select or not the responsive setting of the tabs element. Tabs have a pre-defined number of sections (7), currently there is no option to include an 8th tab and so on.

Once you open any tab settings, you'll be able to add a label to it.

Now select the tab section to insert new components. You can navigate through the tabs to edit each content.

You can add a responsive grid to the tab section and many other elements, it is up to you. This is how the hierarchy looks like on this simple example.

And this is how it looks after inserting content.

So, after you add your content to every tab you want to use, the blank tabs will not be shown to the final user. Below, you can see how it works out on the live experience.

If you have any questions, please contact us on 😀