Gallery
Visual grid of images/items.

Component Documentation: Flexible Gallery Section
This document details the functionality and configuration parameters of a flexible layout component designed to display a multi-image gallery alongside structured textual content.
The Flexible Gallery Section employs a content-split architecture to manage a collection of visual assets (the gallery) and independent promotional or introductory text. This design ensures visual density through the gallery while preserving the clarity and prominence of accompanying textual information.
Grid Layout Control: The Gallery Column Count dictates the rendering of the gallery assets, ensuring scalable and structured display of visual collections.
Uniformity: The Image Aspect Ratio applies a singular dimensional standard across all images in the collection, ensuring visual consistency across the entire section.
Mobile Configuration: The Display Section Title parameter governs responsive behavior, facilitating the collapse of the section content into a mobile accordion using the title as the expandable header.
Interactive Context: Each gallery asset is a self-contained unit, supporting a dedicated Target URL and the use of Hover Tooltip Text to provide contextual or transactional information upon user interaction.
Configuration Parameters
The section has options:
Heading
Text Input
The main title for the section.
Show heading
Boolean
Controls visibility of the heading; if false, it is used as the mobile accordion tab title.
Number of columns
Integer (1-6)
Defines the horizontal grid count for the gallery images.
Image ratio
Enumerated String
Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9). Sets the crop and display ratio for all gallery assets.
Roundness of the image
String / Input
Default or Custom. Controls the border curvature of the image assets.
You can add up to 18 different image which will be looked as the whole gallery with options:
Repeatable Block
The collection of individual Gallery Assets. Each asset block includes the subsequent options:
Image
File Upload
The specific visual asset file for this item.
Tooltip
Text Input
Content displayed in the tooltip overlay on hover.
Link
URL Input
The navigation destination activated when the asset is clicked.
Colors
Parent Group
Container for styling parameters specific to the tooltip overlay.
Heading
Text Input
A localized title or identifier for the specific asset.
Tooltip background
Color Picker
Defines the background color of the hover tooltip box.
Tooltip text
Color Picker
Defines the font color of the text within the hover tooltip.
Last updated