# 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)       |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/paper/sections/content-and-media/collage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.