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)