Flow Chart Component

The Flow Chart component lets the learner interact to get more information about the topic, step by step, vertically down the page.

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

Component overview

The Flow Chart component is an interactive component that is ideal for describing processes, workflows, or timelines. The Flow Chart component can be configured to have animations run on the next item and it is possible to display images next to the text in the Flow Chart component items.

The Flow Chart component is fully responsive.

Component set up

Follow these steps to add the Flow Chart component to a Block:

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

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

General section

In the General section:

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

Scroll down the page to add your Flow Chart Body, as needed. Use the text editor to style and format your text, as needed.

1. Add Flow Chart Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Enter Flow Chart Next Button Aria Label, 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 Flow Chart component that can display an icon and label prior to the Flow Chart component completion, which changes to a different icon and label once the Flow Chart component is completed.

Behaviour section

1. In the Behaviour section, toggle Disable Flowchart Scroll to enable this setting. Enabling Disable Flowchart Scroll will make it so the browser does not scroll to flowchart items when opened.
2. Toggle Allow Flowchart Item Focus to enable and allow focusing flowchart items.

Animations section

In the Animations section, toggle to enable what animations are run when the next Flow Chart item is displayed.

By default, Flowchart Button Animation is enabled. Enabling Flowchart Button Animation will display a pulse animation on the flowchart button until it is clicked.

Add Flow Chart Items

In the Items section, you add Flowchart Items to your Flow Chart component.

For each Flow Chart Item:

1. Add the Item Title for the Flow Chart Item.
2. Edit Item Title Settings, as needed.
3. Add your Item Body. Use the text editor to style and format your text, as needed.

1. Select an Item Image to display.
2. Set Image Per Device Size, as needed.
3. Enter Alt Text for accessibility, as needed.
4. Set Item Graphic Layout. Select the position of the image relative to the text. By default, this is set to Bottom. The layout options are: Right, Left, Top, and Bottom.
5. Set Item Graphic Width. By default, this is set to 50%. The Item Graphic Width can be set to 30%, 50% or 70%.

Heads up!

The Item Graphic Width only applies if Item Graphic Layout is set to Left or Right layout.

Component Examples

The Flow Chart component gives you a lot of flexibility as to the layout settings. Below are examples that illustrate some Flow Chart component setups:

Example 1 - Item 1 illustrates the Graphic Layout set to the left and text content to the right. The Item Graphic Width is set to 50%.

Example 2 – Item 2 illustrates the Graphic Layout set to the right and text content to the left. The Item Graphic Width is set to 30%.

Example 3 – Item 3 illustrates a Flow Chart Item configured with the default Graphic Layout, i.e. set to Bottom and the text content displayed on top.

Did this article help?

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