Graphic Component

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

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

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	❌

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.

Please check out Theming Tips and Tricks if you are finding any of the below are not working for you.

ADD IMAGE OF GRAPHIC THEMING HERE

Caption
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

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.

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