Text and Graphic Component

This component is suitable for use when creating accessible courses.

The Text and Graphic component lets you present text and graphics to your learners.

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

Component overview

The Text and Graphic component lets you easily group text and image content in the same component to be presented to learners. You can choose to display an icon or an image together with your text content. You easily set the component to display column layout, as needed.

The Text and Graphic component is fully responsive.

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

Behavior section

In the Behavior section, you can toggle to use Column Layout. The column layout displays the items in columns next to one another. By default the Number of items in a row is set to 3.

Appearance section

In the Appearance section, you manage Icon Settings for all items. You can set Icon Color as well as Icon Size for all items. This can be overridden in each item.

You can style the Item Content for all items. You can set Item Title Styles, Item Body Color, and Item Content Vertical Alignment.

Note: Setting Item Content Vertical Alignment is possible for items viewed on desktop.

When using Column Layout, you can change Column Item Styles in the Appearance section, like Item Background Color, Items Content Spacing and toggle to Show item separator border. When enabling Show item separator border, you can set Item Separator Border color and Item Separator Border Width, as needed.

Animations section

In the Animations section, you set how Animations are run when the component first comes into view on the page.

Add Text and Graphic Item

In the Items section, you Add Text and Graphic Items to your Text and Graphic component.

For each Text and Graphic Item:

Add Item Title and set Item Title Styles, as needed. Add Item Body; use the text editor to style and format your text, as needed.  Select Item Body Color.

Select a Text and Graphic Column Item Image. Toggle to Set Image Per Device Size and Add Image Alt Text, as needed.

Toggle to View Image In Lightbox and Enable Magnifier, as needed. Select the Position of Image/Icon.

Toggle to add and set layout and styles for Enable Graphic Text, as needed. Select an Item Icon to be shown with the item.

Add, duplicate, or delete cards as needed.

Component Examples

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

Example 1 – text and graphic component presenting icon on top combined with some text.

Example 2 – text and graphic component displayed in column layout.

Example 3 – text and graphic component with text to the left and the image placed to the right.

Did this article help?

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