How do I design tabs?

Hi, this is Sandra from GREYD and today I’d like to show you how you can use the tabs block to create nice tabs modules for your website. So let’s just add the tabs block to a page. Up here you can now define as many tabs as you like and type in the titles of your tabs and down here you can fill your tabs with any content you like. Let’s just put something in there so we can see something.

On the right you can choose from different styles for your tabs. Either work with the default, you can work with chips or also select from your various button styles. You can define whether or not and which kind of animation you want to have when the user switches between tabs in the frontend.

Now we have some design settings for both the tabs and the content area. For the tabs you can define the alignment and also the space between the tabs individually per breakpoint. If you later select an icon you can decide whether to position it on the left or right. The icon itself can later be defined here in the child element. You can select up to two icons, normal and active icon, and as just said you can define the positioning here.

Next is about colors for both the background and the text. Here you can define up to three different states: normal, hover and active, which is when the respective tab is open. We have some typography settings — font size, font family and some detailed settings. Under spaces you can define the padding, which in this case is this area here, again individually per breakpoint. If you like to, you can work with a border radius, border and/or drop shadow.

So let’s go back to the settings for the content area. Again we have text and background color settings and we have the width of this content area, again individually per breakpoint, and also the alignment. Under spaces again we have the padding, which in this case is this area here, again individually per breakpoint. And again you can work with a border radius.

For more videos and information please visit our Helpcenter.