FeaturesGrid

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.

Document model

Block types

FeaturesGrid

Example

Props

Patterns

Common props

Where to go next

​Example

​Props

​Patterns

​Common props

​Where to go next

Example

Props

Patterns

Common props

Where to go next