Tabs – Tabbed content

Remember to have this added to a responsive grid, as any other element, the tab element should follow a hierarchy to facilitate responsiveness.

First, add an empty column and navigate to the interactive components section to drag the tabs’ element to the column.

You can select or not the responsive setting of the tabs’ element. Tabs have a pre-defined number of sections (7) and 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 example:

And this is how it looks after inserting content.

*NOTE: that you don’t need to use all the tabs, the blank tabs will not be shown to the final user.


If you have any questions, please contact us on [email protected].

Share this:

Charmaine Yu is a UX/UI designer at Rock Content. With over a decade of experience in visual arts, Charmaine combines her eye for design with her love of UX to create memorable interactive content at Rock. With a UX design diploma from Brainstation, she spent the last couple of years learning and creating new content in the world of UX. Outside of work, you can find her cuddling her dog, at the next music festival or coach-potating at home.

Site Footer