Image with caption - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki
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
Used by (7)
- CTA block
- Content block segmented
- Content block simple
- Content group simple
- Content item horizontal
- Content item
- Lead space block
Back links (6)
- ...a single Content item, optional media (Image with caption
- an optional media item (Image with caption or Video)
- 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
required component
| 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
optional string
A short descriptive text that lives below the image.
| condition | description | |
|---|---|---|
2.0.1 |
4.0.2 |
String of text is passed to Lightbox media viewer's' 4 heading |
The button icon is displayed only if the Lightbox media viewer 4 is enabled to help communicate to the user that they can view this image with more detail.
| condition | description | |
|---|---|---|
3.0.1 |
4.0.1 |
Button is hidden. |
3.0.1 |
4.0.2 |
Button is displayed. |
optional component
| 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 |
component
The Image here mirrors the Image 1 component from above.
string
This string of text mirrors the Caption 2 content outlined above.
optional string
An optional paragraph of text that allows the author to provide more details around the image.