# Collage

### Section overview

The Collage section displays a customizable grid of content cards that can include text, images, videos, and buttons. It offers extensive layout and styling options for creating visually appealing content layouts.

#### Common use cases

* Creating feature highlights with images and text
* Displaying service offerings or product categories
* Building informational sections with multiple content blocks
* Creating image galleries with captions and call-to-action buttons

#### Usage tips

* Use consistent content lengths across grid items for a balanced appearance
* Adjust column and row span settings to create visual hierarchy
* Consider mobile layout when setting up desktop grid configurations
* Use color schemes consistently across grid items for visual cohesion
* Take advantage of the split layout option for longer introductory content

### Section settings

| Setting              | Description                                              |
| -------------------- | -------------------------------------------------------- |
| Heading              | Text to display as the section heading                   |
| Content              | Rich text content for the section description            |
| Button label         | Text to display on the section button                    |
| Button URL           | URL for the section button                               |
| Top spacing          | Amount of padding at the top of the section (0-300px)    |
| Bottom spacing       | Amount of padding at the bottom of the section (0-300px) |
| Color scheme         | Background color scheme for the section                  |
| Custom color         | Background color when using custom color scheme          |
| Text color           | Force text color to be light or dark                     |
| Border color         | Color of the section border                              |
| Button color         | Style and color of the section button                    |
| Enable color fade    | Enable background color transition when scrolling        |
| Border position      | Position of the section border                           |
| Desktop rows         | Number of columns to display on desktop (1-8)            |
| Mobile rows          | Number of columns to display on mobile (1-4)             |
| Horizontal alignment | Horizontal alignment of section content                  |
| Enable margin        | Apply horizontal margin to the section                   |
| Enable split         | Display header and grid content side by side             |
| Enable split heading | Apply split layout to the section heading                |
| Visibility           | Control section visibility on different devices          |

### Block settings

#### Content

Collage allow you to create individual cards within the grid with customizable content, media, and styling options.

Block limit: 20

| Setting                  | Description                                      |
| ------------------------ | ------------------------------------------------ |
| Heading                  | Text to display as the block heading             |
| Content                  | Rich text content for the block                  |
| Button label             | Text to display on the block button              |
| URL                      | URL for the block button or card link            |
| Image                    | Image to display in the block                    |
| Show image as background | Display the image as a background behind content |
| Video                    | Video to display in the block                    |
| Enable autoplay          | Automatically play video when visible            |
| Enable mute toggle       | Display a button to toggle video sound           |
| Enable loop              | Continuously loop the video                      |
| Minimum height           | Minimum height of the block in pixels (0-500px)  |
| Enable padding           | Apply padding inside the block                   |
| Color scheme             | Background color scheme for the block            |
| Border color             | Color of the block border                        |
| Text color               | Force text color to be light or dark             |
| Button color             | Style and color of the block button              |
| Enable gradient          | Apply a gradient overlay to the block            |
| Text position            | Position text above or below the media content   |
| Vertical alignment       | Vertical alignment of block content              |
| Horizontal alignment     | Horizontal alignment of block content            |
| Row span                 | Number of rows the block should span (1-6)       |
| Column span              | Number of columns the block should span (1-6)    |