Gallery

• 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.

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.

• Gallery items are clickable to open a detailed view or media viewer
• Hover states provide subtle visual feedback on desktop
• Video items display a clear play indicator
• Interaction behavior remains consistent across all layout types

• All images must include descriptive alternative text
• Interactive items must be keyboard accessible
• Ensure sufficient contrast for overlays and indicators
• Do not rely on visual cues alone to indicate media type

• Gallery layouts reflow automatically across screen sizes
• Large items scale proportionally on smaller screens
• Items stack vertically where needed to preserve readability
• Touch interactions are fully supported on mobile devices