Image Gallery

Image Gallery Example

Click on an image to open the gallery.

Markdown Code

You can use the ImageGallery component in markdown by nesting your images inside the ImageGallery component and using the ImageGalleryImage component to define the image’s location, title, alt tag, and the columns the image on the page will span at the medium and large breakpoints. There is no gallery view for mobile so the small breakpoint is not defined.

Here’s an example of how to use the ImageGallery and the ImageGalleryImage components in markdown.

/components/ImageGallery.mdx
<Row>
<ImageGallery>
<ImageGalleryImage
    src="/images/IBM_Design_landing.jpg"
    title="IBM Design"
    alt="IBM Design"
    colMd={2}
    colLg={4}
  />
<ImageGalleryImage
    src="/images/IBM_Cloud_Logo.png"
    title="IBM Cloud"
    alt="IBM Cloud"
    colMd={2}
    colLg={4}
  />
<ImageGalleryImage
    src="/images/IBM_Cloud_Developers.jpg"
    title="IBM Cloud"
    alt="IBM Cloud"
    colMd={2}
    colLg={4}
  />
<ImageGalleryImage
    src="/images/IBM_Cloud_Data_Center.jpg"
    title="IBM Cloud Data Center"
    alt="IBM Cloud Data Center"
    colMd={4}
    colLg={8}
  />
</ImageGallery>
</Row>