Graphic Component

The Graphic component is a presentation component that lets you display an image to the learners. The Graphic component can either display an uploaded image or display a linked external image.

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

Component overview

The Graphic component displays an image and can provide context for other course components. The Graphic component can be added to the left, to the right, or as a full-width component.

The Graphic component is fully responsive and can also be read by screen readers.

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

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

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

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

Graphic section

In the Graphic section, you Select an Image to display to your Graphic component. Toggle to Set Image Per Device Size and add Image Alt Text, as needed.

In the Graphic section, toggle to use an External Image, to be hosted outside of your course, and enter the External Image Url.

Toggle to View Image in Lightbox and select an image to display. Set Lightbox Image Per Device Size, as needed.

Toggle to Enable Magnifier. And add Image Caption, as needed.

Graphic Text section

In the Graphic Text section, toggle to Enable Graphic Text. This will allow you to place text on the graphic.

Add your Graphic Text. Use the text editor to style and format your text, as needed.  Set Graphic Text Layout to Center, Top, or Bottom.

In the Graphic Text section, you set Graphic Text Width, Graphic Text Top Padding, Graphic Text Bottom Padding, Graphic Text Left Padding, and Graphic Text Right Padding, as needed.

Appearance section

In the Appearance section, set Graphic Text Styles for desktop, tablets, and mobiles.

Component Examples

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

Example 1 – displays graphic with magnifier and added image caption text.

Example 2 – displays graphic with styled Graphical Text, Center layout, and padding to the left and to the right.

Did this article help?

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