You can use the Lightbox component to add an image or screenshot to your page. It supports clickable images that expand when clicked.
Prop | Info | Required? | Type |
---|---|---|---|
src | The path to the image. For example, `"/img/hamburger-icon.png" | Required | string |
alt | Set the alt text for the image. This will not show text underneath the image. | Optional | string |
title | This sets the text displayed underneath the image. If the alt prop is not set, but title is, the title will be used as the alt text as well. |
Optional | string |
collapsed | Set the images to be inline, rather than stacked. This is useful for when displaying two images side by side (example), or when displaying the image inline with a sentence. |
Optional | boolean (true/false) |
width | Set a custom width for the image. Accepts px and % values. For example: 600px , 100% |
Optional (Defaults to max width of 400px) | |
alignment | Determine if image should be left, center, or right aligned. Accepts left , right , center . If any other value is entered, it defaults to center |
Optional (Defaults to center) |
<Lightbox
src="/img/hamburger-icon.jpg"
lt="Alt text"
title="This text is visible"
collapsed={true}
width="600px"
alignment="left"
/>
Note that if you're using icons to document things like third party vendors, etc, — you need to add the icon file in the following locations to ensure the icons render correctly in light and dark mode:
website/static/img/icons
website/static/img/icons/white