Skip to main content


The Graphic component lets you display an image - either uploaded image to the Asset Library or a linked external image.

🎬 See it in Action

{CLAIRE - replace this text box with image box and Add gif file here}

⚑️ Fast Facts

See the table for Component capabilities. Use the links to learn more.

Is it...? Yes/No Can it use...? Yes/No
Responsive β˜‘οΈ Images/GIFs β˜‘οΈ
Accessible β˜‘οΈ Video ❌
Able to use Variables ❌ Video Stream ❌
Made with items ❌ Audio ❌

πŸ”§ Customization Options

You can opt to:

  • Display the graphic half-width or full-width
  • Set a different image per device - Desktop, Tablet, and Mobile - so that a different image is viewed depending on the device/screen size used.
  • Use an image uploaded to the Asset Library or link to an external image hosted elsewhere via a Url.
  • Use Lightbox - This makes the image clickable in the course so the learner can make it display fullscreen. The Lightbox image can be different to the original one.
  • Enable a Magnifier function - allowing the learner to magnify certain areas of the image as they move over it.
  • Position text over the graphic.

🎨 How to Theme


Background Color Caption > Appearance > Caption background Color
Border style, Border Radius, Box Shadow Caption > Appearance
Text Size and Colour Caption > Text Appearance
Padding and Margins Caption > Layout
Graphic text
Color Set inside the Component's "Appearance" settings
Size Set inside the Component's "Appearance" settings
Position Set inside the Component's "Graphic Text" settings

πŸͺ„ Tips and Tricks

Take a look atΒ Image OptimisationΒ for help with getting the dimensions and quality of your images the best they can be.

Make sure you always add alt text to an image. Alt text help can be found in our Accessible Content page.

Did this article help?

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