Skip to main content
FeaturesGrid renders a responsive grid of icon-backed cards, each with a short title and a body sentence. You set the number of columns and supply the cards; the grid re-flows on smaller viewports. By the end of this page you will know how to wire up a feature grid, where to look up valid icon names, and which patterns work for marketing pages versus comparison sections.

​
Example

features-grid.json
{
  "block": "FeaturesGrid",
  "props": {
    "columns": 3,
    "items": [
      { "icon": "bolt", "title": "Fast", "body": "Sub-100ms responses." },
      { "icon": "lock", "title": "Secure", "body": "SOC 2 in progress." },
      { "icon": "globe", "title": "Global", "body": "Edge-deployed worldwide." }
    ]
  }
}

​
Props

Icon names come from a fixed internal registry. To fetch the live list for your runtime version, run get_component_examples via the Builder MCP.

​
Patterns

Above-the-fold marketing. FeaturesGrid sits between a Hero and a Cta — the three together form the standard marketing rhythm: introduction, proof, conversion. Comparison block. Set columns: 2 and write contrasting title and body text — before/after, plan tiers, two approaches. The grid becomes a side-by-side comparison without needing a separate component. Dense capability list. columns: 4 with one-word titles works for surfacing breadth — every integration, every supported region.

​
Common props

In addition to the FeaturesGrid-specific props, every block accepts id, class_overrides, visible_if, and analytics_event. See common props on the PageBlocks overview.

​
Where to go next