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

# Product Gallery

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

## Purpose

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

## Anatomy

The Product Gallery component can be broken down into the following elements:

1. **Main image**<br/>Main area to place an image or a video.

2. **Thumbnails**<br/>Shows a preview of the other images within the gallery.

3. **Scroll bar (as required)**<br/>Indicates that more thumbnails are available than fit the space.

4. **Expand Button (optional)**<br/>To maximise the main image, opening it as an overlay.

5. **Navigation (optional)**<br/>Icon Buttons to allow navigating to the previous or next gallery item.

## Variants & States

- Thumbnails: Bottom, Side
- Size: Small, Large
- Number of thumbnails: 3-8
- Expand Button: on/off
- Navigation: on/off
- Scrollbar: on/off

**Thumbnails on the bottom**,
    <br /> with every optional element turned on.
    
  **Thumbnails on the bottom**,
    <br /> with every optional element turned off.
    
  **Thumbnails on the side**,
    <br /> with every optional element turned off.
    

## Thumbnail

- State: Default, Hover, Focus
- Selected: on/off
- Size: Small, Large
- Outline: on/off