Tabs

Tabs allow editors to organize their content into different sections that will only be displayed one at a time. Tabs can contain a variety of other blocks from the system. When using the Tab block make sure to assign each tab a unique Tab ID (which is hidden from users) and assign the content within your layout a matching Tab ID.

System ref: TABS


2.0 Layout/Organization

Tab Samples

A photo of red-crowned cranes

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

Traditional Ainu huts at the Ainu Living Memorial.

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

A wide photo of the town of Higashikawa

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

A photo of red-crowned cranes

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

Traditional Ainu huts at the Ainu Living Memorial.

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

A wide photo of the town of Higashikawa

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

A photo of red-crowned cranes

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

Traditional Ainu huts at the Ainu Living Memorial.

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

A wide photo of the town of Higashikawa

Cras ut neque ex. Nullam vulputate egestas auctor. Sed mollis dolor ac malesuada fringilla. Morbi luctus accumsan maximus. Sed facilisis gravida felis nec facilisis. Nulla tristique lorem non nulla iaculis, in venenatis ligula tincidunt. Nam pellentesque mauris sit amet pulvinar molestie. Proin mauris purus, feugiat id ante molestie, feugiat placerat erat. Sed eu ligula ut lectus luctus tincidunt.

Tab settings


When you add an Tab block to the page, you can adjust the style of the tabs and update content within them.

Screenshot of Tab block editor and Block Settings pane. There is only one tab showing, and no content has been added to it yet.
The Tab block starts with one tab, but more can be added as needed.

In order to add another tab, you must take the following steps:

  1. Create the Tab Content Container: Click on the plus icon in the lower left-hand corner of the block. This will add another tab where you can place content.
  2. Add Identifiers: In the Block Settings on the right-hand side, add another Tab Link using the Add Tab button.
  3. Edit the Tab Title and ID: Each tab must have a unique Title and ID. The Title is what users will see when they look at the tabs. The ID is what nestles the content into a specific tab.
  4. Assign the Tab ID: Return to the main editor and click into the individual tab that you’ve set up. In the Block Settings, a field labeled ID will appear. Replace tab-1 with the ID you’ve just created for your new tab.
Screenshot of Tab Links field. There are three rows, each with a title and ID number of individual tabs.
Assign a Tab ID by clicking into the Tab block settings.
Screenshot of the Tab ID setting for an individual tab. The field includes the text "Tab-3".
Update the Tab ID for each tab by clicking into the tab.

Once you’ve set up your tab structure and have assigned the Title and ID, you are ready to style your tabs. Select the Tab block and open up the Block Settings on the right-hand side. Open the Styles accordion and choose the following:

  • Tab Style: There are three style options for your tabs – Default, Underline, and Highlighter. Examples of each style are shown above.
  • Background Color: This allows you to select the background color for the tab.
  • Text Color: This lets you to set the text color for the tab.

When choosing colors, consider the colors used on the rest of the site and make sure that your color choices meets AA accessibility standards.

When you are ready to add content, click into a tab. Within the block editor, add content blocks to create the layout, and add text and images as needed. You can add more tabs using the plus symbol in the bottom-left corner of the block.

You may add as many Tab blocks as you want on the page, however each tab title and tab ID must be unique across all the Tab blocks.