The Gallery component is used to display a collection of images and media in a visually rich and structured layout. In the Sharjah Design System, the gallery supports a mix of layout formats within a single component, allowing teams to present content dynamically while maintaining visual consistency and balance.

Purpose

The purpose is to:

Showcase visual content such as events, initiatives, or facilities
Present media collections with varied image sizes and formats
Support storytelling through a combination of portraits, landscapes, and video thumbnails
Create engaging visual sections without relying on carousels

The gallery is ideal for landing pages, media pages, campaigns, and content-rich sections.

Component Structure

Supported Layout Types

Large Feature Items
A full-width or container-based carousel used for general media display.
Standard Image Tiles
Used for supporting content and secondary visuals.
Portrait & Landscape Mix
Allows a natural combination of vertical and horizontal images.
Video Thumbnail Tiles (Optional)
Includes play indicators to distinguish video content from static images.

All items follow consistent spacing, corner radius, and alignment rules to preserve harmony.