MarketingFeatureGrid
A marketing feature grid: an optional heading block above a responsive grid of icon + title + description cells. Two- or three-column on desktop. Presentational and theme-driven.
Why Hex UI
Everything your agents need to ship
One source of truth for components, tokens, and blocks — designed for AI assembly.
Spec-driven
Every component ships a machine-readable schema so agents can compose without guessing.
Theme-native
Swap tokens, not class names — heroes, pricing, and CTAs all follow the same palette.
MCP-first
Install and compose from any AI client through the bundled Model Context Protocol server.
Accessible by default
Headless behavior from Radix plus WCAG-checked tokens, no custom keyboard wiring required.
Live previews
Inspect each block with its real React mount and copy the source straight from the docs.
Composable blocks
Heroes, footers, pricing tiers, and dashboards built from the same primitives you already ship.
Installation
pnpm dlx @hex-core/cli add marketing-feature-gridVariant values
columnsDesktop column count.| Value | Description |
|---|---|
threedefault | Three columns on ≥lg. |
two | Two columns on ≥lg. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
featuresrequired | object | — | ReadonlyArray<{ icon?: ReactNode; title: ReactNode; description: ReactNode }>. The feature cells. Icons are ReactNode so any icon set works — none is bundled. |
eyebrow | ReactNode | — | Section eyebrow above the title. |
title | ReactNode | — | Section heading. |
description | ReactNode | — | Section subcopy below the heading. |
columns | enum | three | Grid width on ≥lg: 'two' or 'three' columns. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use to explain product value below the hero. Three columns for short features, two for longer copy. Pair icons from any set via the icon slot.
When not to use
Don't use for pricing tiers (use marketing-pricing) or for navigable links (use a list). Don't exceed ~9 cells — split into two sections instead.
Common mistakes
- Passing an <img> as an icon — the icon well is sized for a glyph (size-5); use an SVG icon, not a photo.
- Writing a paragraph in each description — keep cells scannable, one or two sentences.
- Setting columns='three' with only two features, leaving a gap — match columns to the count.
Accessibility
Each cell title renders as an <h3> under the section <h2>, preserving heading order. Decorative icons are presentational; if an icon conveys meaning, give it an accessible label.
Related components
Token budget: 650
Verified against @hex-core/components@1.12.0