Labeled Graphic Block

The Labeled Graphic block turns an image into an interactive experience by adding clickable hotspots that reveal information when selected.

Adding a labeled graphic

1. Add a Labeled Graphic block to your lesson
2. Upload or select a base image (same sources as the Image block)
3. Click on the image to place hotspot markers

Hotspots

Each hotspot is a numbered marker placed on the image. Click anywhere on the image in the editor to add a hotspot at that position. You can drag markers to reposition them.

Each hotspot has:

• Label - a title shown in the popover header
• Description - rich text content (supports bold, italic, lists, and links) shown when the hotspot is opened

You can add up to 10 hotspots per image.

Image settings

Labeled graphics share the same image settings as the Image block:

• Width - full, large (default), medium, or small
• Alignment - left, center (default), or right
• Alt text - describes the image for screen readers
• Caption - optional text below the image

Learner experience

All hotspot markers are visible on the image. Learners click a numbered marker to open a popover showing the label and description. Links within the description are clickable.