Narrative Component

The Narrative component is an interactive component. The Narrative component is useful for giving topic overviews or breaking up complex information.

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

Component overview

The Narrative component lets you build in text and image in a slider format and lets the learner interact to get more information. The Narrative component is a flexible component that lets you select the layout for the slide items to be displayed as Full with content on top, to the Left, or to the Right.

The Narrative component is fully responsive.

Component set up

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

1. Click Add Component.
2. Use the component search or scroll to find the Narrative component.
3. Click the Narrative component and select Add Left, Add Full, or Add Right.

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

General & Behaviour sections

In the General section:

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

Add your Narrative Body, as needed. Use the text editor to style and format your text.

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

In the 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 Narrative component that can display an icon and label prior to the Narrative component completion, which changes to a different icon and label once the Narrative component is completed.

In the Behaviour section:

In the Behaviour section, you can choose to Restart Gif On Next Slide.

In the Appearance section:

In the Appearance section, you Choose your slide item layout. You can set layout to Full, Left, or Right. You can toggle to Display Content on Top when using full layout.

Heads up!

The settings for choosing your slide item layout sets the slide image to full, left, or right.

In the Animations section:

In the Animations section, you set what animations to run when displaying the next Narrative component item. In the Animations section you can toggle to enable Next Button Animation.

Add Slides

In the Slides section you Add Slides to your Narrative component.

For each Slide Item:

1. Add Narrative Slide Title, as needed.
2. Add Narrative Body, as needed. Use the text editor to style and format your text.

Add Slide Image by selecting or uploading an image. Toggle to Set Image Per Device Size and to View Image In Lightbox. Enter Slide Image Alt Text, as needed.

You can Enable Graphic Text, which will allow you to place text on the image. You can style, position, and layout the Graphic Text as needed.

Add, duplicate, or delete items as needed.

Component Examples

The Narrative component gives you a lot of flexibility. Below are examples that illustrate different Narrative component setups:

Example 1 – Narrative component set to Full layout, with text on top and image below.

Example 2 – Narrative component set to Right layout. The text is to the left, image to the right, and some Graphic Text placed on the image.

Did this article help?

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