Quick Start Guide: Tabs Component

Below are tips to help you build and customize your Tabs component.

Note: The Tabs component is structured using the Tab Builder table. Each row of this table represents a tab, and consists of a corresponding Tab ID, Tab Name, and Content.

Adding and deleting tabs

Use the floating table functions menu in the Tab Builder table to add or delete tabs by adding or deleting rows. This floating menu will appear at the top or bottom when you click anywhere inside the table column or row: table function buttons

Adding content to a tab

Once a tab row has been added, fill in the following fields:

Field

Description

Tab ID

Choose a unique identifier name for the tab.

Tab Name

This is the text that appears at the top of the tab.

Tab Contents

This is the content that you want to present within the tab.

A few helpful hints:

Copying, moving or deleting the Tabs component

The Tabs component can be copied, moved or deleted through the following steps:

Selecting the component
Select the component. Notice the light blue hightlight that appears around the component.
  1. Scroll up to the “Information Card” section, near the top of the component.
  2. Select the component by clicking anywhere in the “Information Card” area. A light blue highlight will appear around the component.
  3. Use keyboard shortcuts to perform the desired operation:

    Operation

    PC

    Mac

    Cut

    Ctrl +x

    Cmd +x

    Copy

    Ctrl +c

    Cmd +c

    Delete

    Delete

    fn + Delete

    Paste

    Ctrl +v

    Cmd + v