Skip to content
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 |