Text and Graphic Component
Outline
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
Follow these steps to add the Text and Graphic component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Text and Graphic component.
- Click the Text and Graphic component and select Add Left, Add Full or Add Right.
Click the Edit Component icon on the newly added Text and Graphic component to begin set up.
General section
Add Text and Graphic Title, or a Text and Graphic Display Title, as needed. Display Title is seen by learners.
Add Text and Graphic Body. Use the text editor to style and format your text, as needed.
- Add Text and Graphic Instruction Text that tells users how to use the component.
- 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 that 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.
Behaviour section
In the Behaviour 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.
In the Appearance section, you can style the Item Content for all items. You can set Item Title Styles, Item Body Color, and Item Content Vertical Alignment.
Heads up!
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 what Animations are run when the component first comes into view on the page.
Heads up!
Animations are only visible when enabling Column Layout in the Behaviour section.
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:
Select an Item Icon to be shown with the item or select a Text and Graphic Column Item Image. Toggle to Position Image/Icon at the Bottom.
If an Image is selected for the component item. Toggle to Set Image Per Device Size and Add Image Alt Text, as needed.
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 and toggle to add and set layout and styles for Enable Graphic Text, as needed.
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.