Skip to content

Latest commit

 

History

History
33 lines (25 loc) · 1.82 KB

lightbox.md

File metadata and controls

33 lines (25 loc) · 1.82 KB
Raw

You can use the Lightbox component to add an image or screenshot to your page. It supports clickable images that expand when clicked.

Available Props:

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)

Example usage

<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