# Icon grid

### Section overview

The Icon Grid section displays a customizable grid of icon cards with headings and descriptive content. It allows for flexible layout options with control over colors, spacing, and responsive behavior.

#### Common use cases

* Showcase product features or benefits with icons and descriptions
* Display service offerings or company values
* Create a grid of informational content cards with visual elements
* Highlight key selling points or unique value propositions

#### Usage tips

* Use consistently sized icons (ideally SVGs) for a polished appearance
* Keep headings concise and content brief for better readability
* Consider mobile layout when configuring grid settings - fewer columns on mobile provide better visibility
* Use color schemes that maintain sufficient contrast between icons, text, and backgrounds

### Section settings

| Setting         | Description                                                                   |
| --------------- | ----------------------------------------------------------------------------- |
| Heading         | Main section heading text                                                     |
| Content         | Rich text content for the section                                             |
| Button label    | Text for the optional button                                                  |
| Button URL      | Link destination for the button                                               |
| Spacing top     | Amount of space above the section (in pixels)                                 |
| Spacing bottom  | Amount of space below the section (in pixels)                                 |
| Color scheme    | Background and text color combination for the section                         |
| Border color    | Color for section borders                                                     |
| Button color    | Style and color for the section button                                        |
| Border position | Position of borders on the section                                            |
| Row desktop     | Number of columns in the grid on desktop devices                              |
| Row mobile      | Number of columns in the grid on mobile devices                               |
| X alignment     | Horizontal alignment of content within the section                            |
| Visibility      | Controls whether section appears on all devices, only mobile, or only desktop |

### Block settings

#### Icon

The Icon block creates a card containing an icon, heading, and descriptive text with customizable layout and styling options. Limited to 20 blocks per section.

| Setting        | Description                                          |
| -------------- | ---------------------------------------------------- |
| Icon           | Image to use as the icon (recommended 256px)         |
| Icon height    | Size of the icon (small, normal, or large)           |
| Heading        | Heading text for this block                          |
| Content        | Rich text content for this block                     |
| Enable padding | Adds padding inside the block                        |
| Color scheme   | Background and text color combination for this block |
| Border color   | Color for block borders (subtle, strong, or none)    |
| Alignment      | Layout direction (horizontal or vertical)            |
| X alignment    | Horizontal text alignment (left, center, or right)   |
| Row span       | Number of rows this block should span in the grid    |
| Column span    | Number of columns this block should span in the grid |


---

# 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/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.