Image Gallery


Image Gallery component displays a collection of images in a carousel format. Each image is represented by a thumbnail and can be clicked to view a larger version in a modal window. The gallery supports navigation using arrows or swipe gestures on mobile devices. The component also includes a heading and text introducing the gallery.

On-page Example

To preview a live example of the component or inspect the code, click the link below

Image Gallery Example 

Component Specifications

Item/Field Description Required/Optional
Section Title Field type: Single line text
Text: H2
Character Recommendation: 30
Wrapping: Single line
Section Subtext Field type: Multi line text
Text: Paragraph
Character Recommendation: 250
Wrapping: Wrap to two lines
Slide Number: No limit
Display: minimum of 4 and up to 8 display per page
Hover: Orange overlay scrolls over image from left,
right, top, bottom
Click: Modal with image, title, description display
Slide - Image Field Type: Image
Aspect Ratio: 4:3
Optimal Image Dimensions: 390x289
Close: X in upper right
Slide - Title Field type: Single line text
Text: H2
Character Recommendation: 35
Wrapping: Single line
Slide - Description Field type: WYSIWYG
Text: Paragraph
Wrapping: Wraps to multiple lines
Mobile Response Eight cards will display per page  NA
Page Placement Full width NA
Accessibility   Slides and navigation arrows are included in tab
through, if user expands the slide, the close will be in

When to Use

  • To showcase a collection of images or photos in a visually appealing way.
  • To provide a convenient way for users to browse through a gallery of images.


When to Consider Something Else

  • If you require more advanced features such as image filtering, sorting, or categorization.
  • If you need a more complex image gallery with additional functionality such as lightbox effects or thumbnail navigation.

Accessibility Tips

  • Ensure that all images have appropriate alternative text ("alt" attribute) for screen readers.
  • Use semantic HTML elements and proper heading hierarchy to provide structure and accessibility to the component.
  • Test the component with keyboard navigation to ensure that users can access and navigate through the gallery using the tab key.