Image with Caption Component
The image caption component makes it easy to include captions with images. The component also provides the option to open the image in a full-screen lightbox with a zoom icon overlay.
When to use the Image with Caption component
Use this component when an image on your web page requires a visible caption.
The component can also open an image within a full-screen lightbox, providing users with the option to zoom or enlarge the image when clicked.
Usability guidance
This component outputs the image and caption in a format optimized for screen readers.
If you only want to use the lightbox feature of the component, the image caption is optional.
Place the component inside a column snippet or float box snippet for different layout options.
Implementation
- Open a page in Modern Campus CMS and enter editing mode.
- Place your cursor where you would like to place an image.
- From the toolbar, select the component icon
, which resembles an atom symbol. - From the list of components, select the Image with Caption component.
- Fill in the required fields and select your options.
- Save and preview.
Image with Caption (no lightbox):
Image with Caption (with lightbox and zoom icon):
