# Icon grid

### Section overview

The Icon grid section creates a customizable grid layout of icon cards that can be used to showcase features, benefits, or services. It offers extensive layout and styling options including color schemes, grid configurations, and responsive behavior.

#### Common use cases

* Highlighting product features or benefits
* Showcasing services or capabilities
* Displaying team members with icons/photos
* Creating visual navigation to important content areas

#### Usage tips

* Use consistent icon styles and sizes for visual harmony
* Limit text content in each icon block to maintain readability
* Consider mobile layout when determining grid size - 1-2 columns works best on mobile
* Use the split layout option when you have a longer section heading or introductory text that should remain visible while scrolling

### Section settings

| Setting         | Description                                                                 |
| --------------- | --------------------------------------------------------------------------- |
| Heading         | Main section heading text                                                   |
| Content         | Main section content (supports rich text)                                   |
| Button label    | Text for the optional call-to-action button                                 |
| Button URL      | Link destination for the call-to-action button                              |
| 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 section                       |
| Border color    | Color of section border                                                     |
| Border position | Position of border (top, bottom, both, or none)                             |
| Button color    | Color style for the section button                                          |
| Row desktop     | Number of columns to display on desktop (1-8)                               |
| Row mobile      | Number of columns to display on mobile (1-4)                                |
| X alignment     | Horizontal alignment of section content (left, center, right)               |
| Enable margin   | Adds horizontal margins to the section                                      |
| Enable split    | Creates a split layout with header sticky on one side and grid on the other |
| Visibility      | Controls section visibility on different device types                       |

### Block settings

#### Icon

The Icon block creates an individual card that displays an icon or image with heading and content. Each section can have up to 20 icon blocks.

| Setting        | Description                                                 |
| -------------- | ----------------------------------------------------------- |
| Icon           | The image to use as the icon (recommended size: 256x256px)  |
| Size           | Size of the icon (small, normal, large)                     |
| Heading        | Heading text for this icon block                            |
| Content        | Content text for this icon block (supports rich text)       |
| Enable padding | Adds padding inside the icon block                          |
| Color scheme   | Background and text color combination for this block        |
| Border color   | Color of the block border                                   |
| Alignment      | Arrangement of icon and content (horizontal or vertical)    |
| X alignment    | Horizontal alignment of block content (left, center, right) |
| Row span       | Number of rows this block should span (1-6)                 |
| Column span    | Number of columns this block should span (1-6)              |