1. Home
  2. Knowledge Base
  3. Block Tutorials
  4. Tabs Block

The tabs block gives you an extremely versatile option for adding tabs to your Gutenberg layouts. The block allows you to customize the layout and appearance of your tabs to give you limitless possibilities.

To use the tabs block, first select it from your block list:

Select Tabs Block

Set the amount of tabs you’d like to show:

Tab Amount

Set the tabs to display horizontally or vertically:

Tab Layout

Content Settings define the background, border, and padding for your tab content. Adjust the colors and spacing to meet your needs:

Content Settings

The Tab Title Color Settings allow you to set the background and border for your tab titles. Control the normal, hover, and active states separately :

Tab Title Color

Tab Title Spacing and Border Settings allow you to set the spacing of your titles as well as the border style:

Tab Title Spacing

Tab Title Font Settings sets the fonts of your title. Set the family, size, line height, and spacing of your tab titles:

Title Font Settings

If you wish, you can add an icon to each individual tab:

Icon Settings

Tab Structure Settings control the min-height and max-widths of your tabs:

Structure Settings

Linked vs Individual control:

When adjusting borders and spacing of your tabs, you can set all sides to be linked and use the same setting, or you can set them individually:

Linked Controls

Linked Settings

Individual Controls

Individual Settings

Was this article helpful?

Related Articles