Tabbed Content

Definition

Tabbed Content is a page section that allows multiple pieces of related content to be displayed within the same space using a tabbed navigation interface. Users can click on each tab to view different content panels without reloading the page. This component is only available for Landing Pages.

Usage & Specification

When to Use:

• To organize related content into manageable sections.

• To reduce vertical scrolling by displaying multiple content blocks in one container.

• To improve the user experience when presenting content such as FAQs, service categories, or topic-based information.

Specifications:

• Only one Tabbed Content component can be added per Landing Page.

• Tabs appear horizontally above the content area.

• The first tab listed will appear by default when the page loads.

• Tabbed Content is mobile responsive.

How to create Tabbed Content

Select “Add Tabbed Content” from the content dropdown when editing a Landing Page.

[Optional] Add a Label:

• This appears above the tabs as a section heading.

Add Individual Tabs:

• Tab Title: Required. This becomes the clickable tab.

• Tab Content: Add any content you’d like (text, images, video, etc.) via the WYSIWYG editor.

• Click “Add Tab” to add additional tabs.

Reorder Tabs:

• Drag and drop to change the order. The first tab in the list will appear by default.

[Optional] Enter labels for a header and footer

• These fields display like this:

Styling and Behavior

• Layout: Tabs are arranged horizontally by default and cannot be switched to vertical.

• Navigation: Tabs switch content without page reloads, creating a seamless experience.

Important Notes

• Only one Tabbed Content block per Landing Page is allowed.

• Accessibility: Ensure tab titles and content are clearly labeled and structured for screen readers.

• Performance Tip: Avoid excessive content or too many tabs, which can slow down page loading or overwhelm users.