# Collage

### Section overview

The Collage section creates a responsive grid layout of content cards that can display text, images, videos, and buttons in a customizable grid format.

#### Common Use Cases

* Creating feature showcases with images and descriptive text
* Building image galleries with optional text overlays
* Displaying product highlights or categories with linked cards
* Creating promotional grids with mixed media content

#### Usage Tips

* For best visual balance, use consistent image sizes across grid items
* Utilize row and column span settings to create visually interesting layouts
* Consider mobile display when configuring the grid - fewer columns work better on smaller screens
* Use background images or videos sparingly to avoid overwhelming the user
* For text overlay on images, ensure sufficient contrast for readability

### Section Settings

| Setting              | Description                                                           |
| -------------------- | --------------------------------------------------------------------- |
| Heading              | Section heading text                                                  |
| Content              | Rich text content displayed below the heading                         |
| Button label         | Text displayed on the section button                                  |
| Button URL           | URL the section button links to                                       |
| Top spacing          | Spacing in pixels above the section (0-300px)                         |
| Bottom spacing       | Spacing in pixels below the section (0-300px)                         |
| Color scheme         | Background and text color combination for the section                 |
| Border color         | Color of section borders                                              |
| Button color         | Style and color variant for the section button                        |
| Border position      | Position of borders on the section (none, top, bottom, or both)       |
| Desktop columns      | Number of grid columns on desktop devices (1-6)                       |
| Mobile columns       | Number of grid columns on mobile devices (1-4)                        |
| Horizontal alignment | Alignment of content horizontally within the section                  |
| Visibility           | Device visibility options (all devices, mobile only, or desktop only) |

### Block Settings

#### Content

A customizable content block that can display heading, text content, images, videos, and a button.

Block limit: 20

| Setting                     | Description                                                   |
| --------------------------- | ------------------------------------------------------------- |
| Heading                     | Block heading text                                            |
| Content                     | Rich text content displayed within the block                  |
| Button label                | Text displayed on the block button                            |
| Button URL                  | URL the block button links to                                 |
| Make entire block clickable | Makes the entire block function as a link to the button URL   |
| Featured image              | Main image displayed in the block                             |
| Background image            | Image used as the block background                            |
| Background video            | Video used as the block background                            |
| Enable autoplay             | Automatically plays background video                          |
| Enable mute toggle          | Shows a button to toggle video sound                          |
| Enable loop                 | Continuously loops background video                           |
| Top spacing                 | Spacing in pixels above the block content (0-300px)           |
| Bottom spacing              | Spacing in pixels below the block content (0-300px)           |
| Enable padding              | Adds padding inside the block                                 |
| Color scheme                | Background and text color combination for the block           |
| Border color                | Color of block borders                                        |
| Text color                  | Color of text within the block                                |
| Button color                | Style and color variant for the block button                  |
| Enable gradient             | Adds a gradient background overlay for better text visibility |
| Vertical alignment          | Alignment of content vertically within the block              |
| Horizontal alignment        | Alignment of content horizontally within the block            |
| Row span                    | Number of grid rows the block spans (1-6)                     |
| Column span                 | Number of grid columns the block spans on desktop (1-6)       |