# Featured collection grid

### Section overview

The Featured collection grid section displays a collection of products in a responsive grid layout with customizable appearance and content. It can also include an optional content card.

#### Common use cases

* Showcasing featured products on the homepage
* Displaying category-specific product collections
* Creating a product highlight section with accompanying promotional content
* Building custom product showcases with mixed content

#### Usage tips

* Choose the right number of products to display based on your page layout
* Select appropriate grid sizes for desktop and mobile to maintain visual appeal
* Ensure product images are consistent in size and style for a cohesive look
* Add a content card to provide context or promotional information alongside products
* Consider color scheme choices that complement your products
* For mobile, a 2-column grid generally works better than a single column

### Section settings

| Setting              | Description                                           |
| -------------------- | ----------------------------------------------------- |
| Collection           | Select which product collection to display            |
| Total items          | Set the number of products to show (1-20)             |
| Heading              | Add a title for the section                           |
| Content              | Add descriptive text to accompany the products        |
| Button label         | Text to display on the section's button               |
| Button URL           | Link destination for the section's button             |
| Spacing top          | Amount of space above the section (0-300px)           |
| Spacing bottom       | Amount of space below the section (0-300px)           |
| Color scheme         | Select the background and text color combination      |
| Border color         | Choose subtle or strong border coloring               |
| Button color         | Select the style for buttons in this section          |
| Border position      | Position of borders (none, top, bottom, or both)      |
| Desktop columns      | Number of products per row on desktop (2-5)           |
| Mobile columns       | Number of products per row on mobile (1-2)            |
| Horizontal alignment | How content aligns horizontally (left, center, right) |
| Visibility           | Control section visibility on different devices       |

### Block settings

#### Card

This block adds a content card that can be included alongside products in the grid. Limited to 1 per section.

| Setting            | Description                                          |
| ------------------ | ---------------------------------------------------- |
| URL                | Link destination when the card is clicked            |
| Heading            | Title text for the card                              |
| Content            | Descriptive text for the card                        |
| Button label       | Text to display on the card's button                 |
| Image              | Main image to display in the card                    |
| Background image   | Image to use as card background                      |
| Video              | Video to display in the card                         |
| Enable autoplay    | Automatically play video when visible                |
| Enable mute toggle | Show mute/unmute button for video                    |
| Enable loop        | Continuously loop video playback                     |
| Index              | Position order in the grid                           |
| Color scheme       | Background and text color combination                |
| Border color       | Color of the card's border (subtle, strong, or none) |
| Button color       | Style for the card's button                          |
| Column span        | Number of grid columns the card should occupy (1-4)  |


---

# 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/products-and-collections/featured-collection-grid.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.