---
title: "Product Gallery — Usage"
canonical: https://sky-ui.cf.sky.com/components/product-gallery/usage
---

# Product Gallery — Usage

The Product Gallery component is used to visually showcase the features of a product.

## 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

**Main image**
  The aspect ratio for the main image is customisable.
  **Thumbnails**
  The amount of thumbnails is restricted in Figma, but flexible in React. Just
    notify the developers to add any number of additional thumbnails.
  **Scrollbar**
  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**
  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.
  **Outline**
  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](/guides/media) for best practices and examples on alt text. Designers are asked to provide alt text when handing over to development.