Image with caption

Decorator UI component

This component wraps the responsive Image component we’ve built and provides it with a caption, and option to zoom in to see a larger and clearer version of the image.

---

Table of contents

• 1. Image
• 2. Caption
• 3. Button icon
• 4. Lightbox media viewer
  • 4.1 Image
  • 4.2 Heading
  • 4.3 Copy

Dependencies (2)

• Image
• Lightbox media viewer

Used by (7)

• CTA block
• Content block simple
• Content block segmented
• Content group simple
• Content item
• Content item horizontal
• Lead space block

Back links (6)

Content block simple (1)

• ...a single Content item, optional media (Image with caption

Content group simple (1)

• an optional media item (Image with caption or Video)

Content item horizontal (2)

• media here is can be an Image with caption or a
• See Image with caption and Video for more

Content item (2)

• the adopter with option to use either Image with caption
• See Image with caption for more

Resources

• r1: Box folder

---

1. Image

required component

Events

	event	description
1.0.1	onClick && 4.0.2	Launches the Lightbox media viewer 4 if enabled. The whole image area is clickable.

See Image for more details

See design specs ^r1 for visual states

Back to top

2. Caption

optional string

A short descriptive text that lives below the image.

Logic

	condition	description
2.0.1	4.0.2	String of text is passed to Lightbox media viewer's' 4 heading

Back to top

3. Button icon

The button icon is displayed only if the Lightbox media viewer ⁴ is enabled to help communicate to the user that they can view this image with more detail.

Logic

	condition	description
3.0.1	4.0.1	Button is hidden.
3.0.1	4.0.2	Button is displayed.

See design specs ^r1 for visual states

4. Lightbox media viewer

optional component

Logic

	condition	description
4.0.1	false	default disables the the use of Lightbox media viewer
4.0.2	true	Enables the the use of Lightbox media viewer

See Lightbox media viewer for more details

4.1 Image

component

The Image here mirrors the Image ¹ component from above.

4.2 Heading

string

This string of text mirrors the Caption ² content outlined above.

4.3 Copy

optional string

An optional paragraph of text that allows the author to provide more details around the image.

Back to top