Gallery

Visual grid of images/items.

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:

Parameter Name
Data Type / Permitted Values
Function

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