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