Spotlight Gallery

Spotlight Gallery is a  component that displays a collection of images in a horizontal sequence. Users can navigate through these images using controls.

The image gallery primarily showcases decorative images rather than informative images or illustrations 

When to use it:

The Spotlight Gallery Slider should be displayed at full page width. If there is a specific need to place it inside a tab container, the slider should be container-wide.

Best practices:

The maximum number of images to display is 10. Users typically see the first 6 images.

Consider using a second slider if you need to display more than 10 images.

When the slider has more than 6 images, consider using the  Image viewer gallery component . This allows users to preview all images and skip between them. 

When to use it:

The Spotlight Gallery Slider should be displayed at full page width. If there is a specific need to place it inside a tab container, the slider should be container-wide.

Best practices:

The maximum number of images to display is 10. Users typically see the first 6 images.

Consider using a second slider if you need to display more than 10 images.

When the slider has more than 6 images, consider using the  Image viewer gallery component . This allows users to preview all images and skip between them. 

Accessibility considerations:

In the content before the slider, consider describing what the slider is showing. For example, "Stephen Avenue plans images, including parking spots, accessible ramps, and bike racks."

This component doesn’t have autoplay as it is not accessible.

The reader will communicate the user what happens when clicking the arrows.