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

Last updated

Was this helpful?