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 Image component is fully responsive and can also be read by screen readers.

Component set up

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

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

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

General section

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

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

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