Product Gallery - Overview

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
   Main area to place an image or a video.

2. Thumbnails
   Shows a preview of the other images within the gallery.

3. Scroll bar (as required)
   Indicates that more thumbnails are available than fit the space.

4. Expand Button (optional)
   To maximise the main image, opening it as an overlay.

5. Navigation (optional)
   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

Thumbnail

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