# Icon grid

### Section overview

The Icon Grid section displays a customizable grid of icon cards with text content. It allows merchants to showcase features, benefits, or services with visual elements.

#### Common Use Cases

* Highlighting product features or benefits
* Showcasing services or offerings
* Creating feature comparison grids
* Displaying brand values or commitments

#### Usage Tips

* Use consistent icon sizes for a clean, professional appearance
* Keep text content concise for better readability
* Consider using the split layout option for sections with longer headings or content
* For mobile, reduce the number of columns to ensure content remains readable

### Section Settings

| Setting              | Description                                                    |
| -------------------- | -------------------------------------------------------------- |
| Heading              | The main heading for the section                               |
| Content              | The descriptive text for the section                           |
| Button label         | Text displayed on the button                                   |
| Button URL           | The URL where the button links to                              |
| Top spacing          | Amount of space above the section (0-300px)                    |
| Bottom spacing       | Amount of space below the section (0-300px)                    |
| Color scheme         | The background color scheme for the section                    |
| Custom color         | Custom background color when "Custom" color scheme is selected |
| Text color           | Override for the text color                                    |
| Border color         | Color of the section border                                    |
| Button color         | Style and color for the section button                         |
| Enable color fade    | Enable background color transition when scrolling              |
| Border position      | Position of the section border (none, top, bottom, or both)    |
| Desktop columns      | Number of columns to display on desktop devices (1-8)          |
| Mobile columns       | Number of columns to display on mobile devices (1-4)           |
| Content alignment    | Horizontal alignment of the section content                    |
| Enable margin        | Enable horizontal margin on the section                        |
| Enable split         | Split the section into a header area and content area          |
| Enable split heading | Allow heading to span full width in split layout               |
| Visibility           | Control section visibility on different device types           |

### Block Settings

#### Icon

The Icon block allows you to add individual icon cards to the grid. Each block can have its own icon, heading, and content.

Block limit: 20

| Setting           | Description                                                 |
| ----------------- | ----------------------------------------------------------- |
| Icon              | The image to display as the icon (recommended 256px square) |
| Size              | Size of the icon (small, normal, or large)                  |
| Heading           | The heading text for this icon card                         |
| Content           | The descriptive text for this icon card                     |
| Enable padding    | Add padding inside the icon card                            |
| Color scheme      | Background and text color scheme for this icon card         |
| Border color      | Color of the border around this icon card                   |
| Alignment         | Vertical or horizontal alignment of icon and text           |
| Content alignment | Horizontal alignment of the content within the card         |
| Row span          | Number of rows this card should span (1-6)                  |
| Column span       | Number of columns this card should span (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/space/sections/content-and-media/icon-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.