Tabs Component

Introduction

The Tabs component allows you organize content into a tabbed section on the page, and shorten a page to keep a page from being long.

See a live example here of the ribbon style.
See a live example here of the dropdown style.

To use the component, add it to your page and then when you add tabs you will be asked to select which component you would like in the tab. Then you can name the tab.

Upon adding multple tabs you will see a menu that will allow you to switch between tabs in editor mode.

Specifications

Character Limit/Usage

While there are no character limits on the tab titles, be aware that longer titles will take of a lot of space.

Image Requirements

This component does not support images.

Video Requirements

N/A

Styling

There are 3 style options for this component but please note that the S&D Style should only be used within the support pages. The other 2 styles can be used within the marketing pages as per your use case:

Ribbon Style: shows tabs as buttons with outlines.
Dropdown Style: shows tabs as underlined text.
S&D Style: displays tabs with underlined text and a longer line to break up the content.

SEO Guidance

The choice of tab style should be guided by your specific use case and the amount of content you want to display. If the page doesn’t have much content, or if the information in the tab is crucial for the page, then the dropdown style is recommended. On the other hand, if the page is content-heavy, requiring extensive scrolling, and the tab’s information is not the most critical for the page, then the ribbon style might be more suitable.

Generally, the dropdown style is useful as all of the content is available and visible on the page whereas the ribbon style does ‘hide’ content visually. It is preferred that all important content is visible on page load which means that the dropdown style of tab would be more ideal for SEO. However, if you have a number of tabs (>3) this could cause the page to become long so the ribbon style would be better for user experience.

Use Cases and Style Variations

Dropdown Style

Tab 1
Tab 2
Tab 3

[Category, Subcat or Product] Representational Image 4x3

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

Ribbon Style

Tab 1
Tab 2
Tab 3

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

S&D Style

Tab 1
Tab 2
Tab 3

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

Eyebrow

Title

Optimize budgeting, forecasting and scheduling to empower your employees, improve efficiencies and manage costs. Empower teams with control over their schedules and ensure you have the right people in the right place at the right time, creating a more flexibile workforce that is better able to adapt to change and serve customers.

Need Help?

If you need help with a specific use case for the title component or need guidance with appropriate configuration, please contact the web team.