# Collage

### Section overview

The Collage grid section creates a flexible grid layout of customizable content cards that can be used to display various types of content with images, videos, text, and buttons.

#### Common use cases

* Creating a product showcase or collection highlights
* Building a features or benefits grid
* Displaying team members or testimonials
* Creating a visual collage of promotional content or announcements

#### Usage tips

* For the best visual balance, use consistent content block heights or intentionally vary them using row span settings
* Customize individual blocks with different background colors to create visual interest
* Consider mobile layout carefully - fewer columns (1-2) work best on smaller screens
* For best performance, optimize images before uploading and use video sparingly
* Use the split layout option when you want a persistent header alongside scrollable content

### Section settings

| Setting              | Description                                                                                                                                                                                |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Heading              | The main title for the section                                                                                                                                                             |
| Content              | Descriptive text to accompany the section heading                                                                                                                                          |
| Button label         | Text displayed on the section's call-to-action button                                                                                                                                      |
| Button URL           | Destination link when the section button is clicked                                                                                                                                        |
| Top spacing          | Amount of padding above the section (in pixels)                                                                                                                                            |
| Bottom spacing       | Amount of padding below the section (in pixels)                                                                                                                                            |
| Color scheme         | Background and text color combination for the entire section                                                                                                                               |
| Border color         | Color for the section border (subtle or strong)                                                                                                                                            |
| Button color         | Style and color variant for the section's button                                                                                                                                           |
| Border position      | Where borders appear on the section (none, top, bottom, or both)                                                                                                                           |
| Columns (desktop)    | Number of columns to display on desktop devices (1-8)                                                                                                                                      |
| Columns (mobile)     | Number of columns to display on mobile devices (1-4)                                                                                                                                       |
| Horizontal alignment | How content aligns horizontally within the section (left, center, right)                                                                                                                   |
| Enable margin        | Whether to include horizontal margin around the section                                                                                                                                    |
| Enable split         | Whether to split the section into a fixed header and scrollable content                                                                                                                    |
| Visibility           | Control on which devices the section appears (all, mobile only, desktop only)                                                                                                              |
| Account visibility   | Controls when the section is displayed based on customer login status (always, logged out, logged in but not approved, logged in and approved). Available in theme version 2.0.1 or later. |

### Block settings

#### Content block

Content blocks are the individual card elements within the grid. Each can have its own content, media, and styling.

Block limit: 20

| Setting              | Description                                                                     |
| -------------------- | ------------------------------------------------------------------------------- |
| Heading              | The title for this content block                                                |
| Content              | Rich text content for this block                                                |
| Button label         | Text displayed on this block's call-to-action button                            |
| URL                  | Destination link when this block is clicked                                     |
| Image                | Main image to display in this content block                                     |
| Background image     | Image to use as background for this content block                               |
| Video                | Video to display in this content block                                          |
| Enable autoplay      | Whether the video should play automatically                                     |
| Enable mute toggle   | Whether to show a button to toggle video sound                                  |
| Enable loop          | Whether the video should repeat continuously                                    |
| Minimum height       | Minimum height of the content block (in pixels)                                 |
| Enable padding       | Whether to include internal padding within the block                            |
| Color scheme         | Background and text color combination for this block                            |
| Text color           | Control whether text appears in default, light, or dark color                   |
| Border color         | Color for the block's border (subtle, strong, or none)                          |
| Button color         | Style and color variant for the block's button                                  |
| Enable gradient      | Whether to apply a gradient effect to the block background                      |
| Vertical alignment   | How content aligns vertically within the block (top, middle, bottom)            |
| Horizontal alignment | How content aligns horizontally within the block (left, center, justify, right) |
| Text position        | Whether text appears above or below media content                               |
| Row span             | How many rows this block should occupy (1-6)                                    |
| Column span          | How many columns this block should occupy (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/keystone/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.