Product Gallery - Usage
Behaviour
The Product Gallery can be explored by using the navigation buttons or by selecting a thumbnail directly. On handheld devices it's also possible to swipe through the images in the main area and in the thumbnail rail.
Variants Usage
The Product Gallery comes in two orientations: The thumbnails can either sit on the side or at the bottom of the main image. Available sizes depend on the orientation.
Content Guidance
Images & Videos
The Product Gallery can show still images as well as videos. The component doesn’t provide any video or audio controls. Please use the native controls instead.
Thumbnails
The thumbnail should show a preview of the main image. However if the main image uses an aspect ratio that is quite different to the 1:1 ratio of the thumbnail, it is possible to use a different image file for both of them.
Video content should always use still a image as its thumbnail.
Alignment
The overall width of the Product Gallery must align with the grid system set out in Foundations. It sits within the margins and can span as many columns as necessary within the range of the chosen variant. It can be positioned centrally, left or right on the page.
On larger viewports it’s not necessary to span the Product Gallery over too many columns, as this will make the main picture very large quite quickly.
Mobile
Tablet
Desktop
The scrollbar sits outside of the component frame (and therefore doesn’t align with the grid). The below example has been downsized proportionally to fit into the documentation.
Adjustable elements
The aspect ratio for the main image is customisable (currently only in React).
The amount of thumbnails is restricted in Figma, but flexible in React. Just notify the developers to add any number of additional thumbnails.
The scrollbar is only relevant for Desktop applications, where it's not possible to tap and drag the thumbnails. In Figma, the scrollbar needs to be turned on manually if the thumbnails don't fit the space. It is only used to display what it would look like live, it's not set up to work in a prototype. In React, a native scrollbar will be displayed automatically if it is needed.
Navigation buttons are displayed by default to ensure easy and accessible handling of the component for the user. While the navigation buttons are technically optional, it is not recommended to turn them off.
Optional outline in case there isn’t enough contrast between thumbnail image and background.
Notes on accessibility
The Product Gallery is set up as a list.
The navigation buttons are mainly there to help mouse users with horizontal scrolling. They are marked with aria-disabled="true" for assistive technologies, to inform users that the navigation buttons are not essential for their use case.
When navigating through the Product Gallery via screen reader, a list with a number of items is announced. The user can then choose to navigate through the list item by item, or skip the list entirely.
Alt text for images
Where appropriate, alt text should be written to describe the individual images in a specific and succinct manner. Please refer to our Guides for best practices and examples on alt text. Designers are asked to provide alt text when handing over to development.