Tabs Component

The Tabs component lets you present information to learners in a tabbed format.

This article provides an overview of the Tabs component, component setup and behavior, and examples of Tabs component configurations.

Component overview

The Tabs component is an interactive component that lets you present information to learners in a tabbed format. The Tabs component can be set to display text information together with media, as needed. The Tabs component is flexible and allows you to position the media on top, bottom, left, or right relative to the text content in each tab item.

The Tabs component is fully responsive and can be configured to run animations when the next tab item is displayed.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add Title, or a Title, as needed. Title is seen by learners.

Scroll down to add your Body. Use the text editor to style and format your text.

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Tabs component. This widget can display an icon and label prior to the Tabs component completion, which changes to a different icon and label once the Tabs component is completed.

Appearance section

In the Appearance section, you set Tab Text Styles for all tabs text.

Note: Setting Tab Text Styles overrides the current theme’s styles.

In the Appearance section, Truncate Tab Text is enabled by default. Toggle to disable as needed.

Behavior section

In the Behavior section, toggle to enable Always Use Desktop Layout. If enabled the component will display desktop layout even for smaller screen sizes.

Animations section

In the Animations section, toggle to set what animations to run when the next tab item is displayed.

Add Tab Items

In the Tabs section, you Add Tab items to your Tabs component.

For each Tab item:

1. Enter Tab Label that will be displayed on the navigation tab above the content.
2. Add Tab Panel Title. That is the title of the tab and will show when the tab has been clicked on.
3. Add Tab Panel Body. That is the text that will appear when the tab title is clicked on. Use the text editor to style and format your text, as needed.

1. Select Tab Panel Media Type for the Tab Item. Media Type can be set to Image, Video, or Videostream.
2. Select Position of Tab Panel Media. Select Right, Left, Top, or Bottom.

Note: The image/video will be positioned above the text on tablet and mobile unless the “Bottom” position is selected.

For Tabs with Media Type Image:

1. Select an Image to display.
2. Set Image Per Device Size, as needed.
3. Enter Image Alt Text, as needed.

For Tabs with Media Type Video:

1. Select a Video in mp4 format.
2. Select a Poster Image to display.
3. Toggle to set video to Auto Play when the Tab Item is selected.
4. Enter Label to be shown as a subtitle track option.

Note: Regarding Subtitles - Due to browser restrictions subtitle files cannot play in offline courses. Try using the transcript instead if offline is required.

1. Add a Subtitle track for the video.
2. Add Transcript to be displayed inside a popup. Add Transcript Button Text and Transcript Text. Use the text editor to style and format your text, as needed.

For Tabs with Media Type Video Stream:

Set Streaming Service used for your video. Enter Video Embed Code and set configuration for your video depending on your Video player service.

Add, duplicate, or delete Tab Items as needed.

Component Examples

The Tabs component gives you a lot of flexibility as you can choose to display text only, text together with an image, or text together with a video. The following is one example to illustrate the configuration of the Tabs component:

Example – displays three tabs, with Tab Item 1 active. The Tab Item shows text content to the left and an image to the right. The image for the Tab Item is set to width 30% relative to the text content.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.