Tabs

The tabs pattern is a useful way to present large amounts of content in an organized and user-friendly manner. Tabs may be displayed horizontally or vertically. Each tab represents a specific category or section of content, and when a user clicks on a tab, the corresponding tab panel is displayed, revealing the relevant content. The other tab panels remain hidden, preserving the page layout.

Tabs allow users to easily navigate through different sections of content and find the information they need without having to scroll through a long page.

Tabs Settings

General Tab

In the General tab of the module, you can add, edit, and remove tab items. To add new tabs, click the Add Item button.

Each tab item has a Title field, an Icon field, and a Content field. The Title field corresponds to the text inside of the tab and the Content field corresponds to the section of content that is revealed within the tab panel when a tab is clicked on.

Each tab item also has the standard set of controls (icons) which perform the following actions:

• Reorder (drag & drop into the desired order)
• Duplicate
• Remove

The module also has a Label field. This provides an accessible text label to the "grouping" of tabs. Screen readers will utilize this visually hidden label as a way to better understand this content as a whole. For example, if your tab module is about the features of a new product, you may want to use the text "New product feature descriptions".

Style Tab

In the Style tab of the module, there are limited options for "styling" the module.

• Orientation: Display the tabs in vertical or horizontal format. This option defaults to "horizontal".
• Accent Color: This is used for highlighting the current active item in the tablist. By selecting the accent color, any text color will automatically update in order to meet WCAG 2.1 Level AA guidelines for color contrast ratios.

Advanced Tab

In the Advanced tab of the module, there are all the usual settings for margins, visibility, and advanced HTML settings.