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

Follow these steps to add the Tabs component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Tabs component.
3. Click the Tabs component and select Add Full.

Click the Edit Component icon on the newly added Tabs component to begin set up.

General section

In the General section:

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

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

1. Add Tabs 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 that 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.

Heads up!

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.

Behaviour section

In the Behaviour 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 text that will be displayed on the navigation tab above the content.
2. Add Item Title. That is the title of the tab and will show when the tab has been clicked on.
3. Add Item 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 Media Type for the Tab Item. Media Type can be set to Image, Video, or Videostream.
2. Select Position of Item Media. Select Right, Left, Top, or Bottom .

Heads up!

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.

Heads up!

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 Video player 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.