Marketing · Gutenberg
Icon Feature Grid block for WordPress
Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections.
Inspector panels on this block: Section Header, Grid & Style, Icon Settings, Feature Items. Those titles come from index.js, not from a shared template.
Behavior controls: “Heading Alignment” options: Left, Center; “Card Style” options: Card (shadow), Bordered, Minimal (no border), Gradient backgrounds, Dark; “Columns” options: 2, 3, 4, 5, 6; “Icon Box Style” options: Circle, Square (rounded), Plain (no box), Outline circle.
Icon Feature Grid has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Marketing → search “Icon Feature Grid” (block name `blockenberg/icon-feature-grid` in block.json). Style it in the sidebar after insert.
How to use Icon Feature Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Icon Feature Grid”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Section Header. Set “Show Heading”, “Heading”, “Show Subheading”, “Subheading”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Heading | Text field in the inspector. block.json default: Everything you need to succeed. Saved as `heading`. |
| Show Subheading | On/off toggle in the inspector. On by default. Saved as `showSubheading`. |
| Subheading | Text field in the inspector. block.json default: A complete toolkit designed to help your team move faster, collaborate better, and build with confidence.. Saved as `subheading`. |
| Heading Alignment | Select control; the chosen value is saved on the block. Options: Left; Center. block.json default: center. Saved as `headingAlign`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Card (shadow); Bordered; Minimal (no border); Gradient backgrounds; Dark. block.json default: card. Saved as `style`. |
| Columns | Select control; the chosen value is saved on the block. Options: 2; 3; 4; 5; 6. block.json default: 3. Saved as `columns`. |
| Card Padding (px) | Numeric range control in the inspector. Range 12–56. block.json default: 28. Saved as `cardPadding`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `cardRadius`. |
| Grid Gap (px) | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `gap`. |
| Section-to-Grid Gap (px) | Numeric range control in the inspector. Range 16–96. block.json default: 56. Saved as `sectionGap`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–180. block.json default: 64. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–180. block.json default: 64. Saved as `paddingBottom`. |
| Icon Box Style | Select control; the chosen value is saved on the block. Options: Circle; Square (rounded); Plain (no box); Outline circle. block.json default: circle. Saved as `iconStyle`. |
| Use Per-Item Accent Color | On/off toggle in the inspector. On by default. Saved as `useItemAccent`. |
| Icon Size (px) | Numeric range control in the inspector. Range 14–48. block.json default: 24. Saved as `iconSize`. |
| Icon Box Size (px) | Numeric range control in the inspector. Range 28–96. block.json default: 52. Saved as `iconBoxSize`. |
| Icon Box Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `iconRadius`. |
| Dashicon | Select control; the chosen value is saved on the block. Options: Performance; Shield / Security; Chart / Analytics; Groups / Team; Migrate / Integrate; SOS / Support; Star; Clock / Time; Checkmark; Lightbulb / Idea. |
| Feature Items — Title | Text field in the inspector. |
| Description | Text field in the inspector. |
| Section Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Global Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `globalAccent`. |
| Heading | Color control in the inspector. block.json default: #0f172a. Saved as `headingColor`. |
| Subheading | Color control in the inspector. block.json default: #64748b. Saved as `subColor`. |
| Feature Title | Color control in the inspector. block.json default: #0f172a. Saved as `titleColor`. |
| Description | Color control in the inspector. block.json default: #475569. Saved as `descColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `cardBorder`. |
When this is the right block
- Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections — that is the job of Icon Feature Grid, not a generic content block.
- Use it when you need the editor control labeled “Show Heading”, which exists on this block’s inspector.
- It matches pages about features, grid, icons.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Icon Feature Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Icon Feature Grid”. It sits under Marketing. After insert, open Section Header and set “Show Heading”, “Heading”, “Show Subheading”, “Subheading”.
What makes Icon Feature Grid different from other Blockenberg blocks?
Responsive grid of features with icons, titles and descriptions. Perfect for product pages, landing pages, and about sections. Inspector labels on this block include “Show Heading”, “Heading”, “Show Subheading”, “Subheading”.
Is the Icon Feature Grid Gutenberg block free?
Yes. Icon Feature Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Icon Feature Grid to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Section Header, Grid & Style, Icon Settings, Feature Items).
Related marketing blocks
Feature Columns
Responsive 2–4 column feature grid with icon, title, and description. Multiple icon and visual styles.
Feature Grid
Responsive grid of feature cards — each with an icon, title, text, and optional link. Perfect for services, benefits, and product highlights.
Split Benefits
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern.
Card CTA Grid
A grid of action cards — each with icon, title, description and link. Perfect for get-started, help, or navigation sections.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Icon Feature Grid from the Gutenberg inserter.