Graphic Component
Outline
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
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 |
πͺ 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.