Features
Responsive grid of feature cards with optional icons, titles, and descriptions.
Use it to showcase product capabilities on a landing page.
Summary
The Features component renders a <section> containing a grid of cards. Each card can include an Iconify icon, a title, and a description. The grid adapts from one column on mobile to three columns on desktop.
Why Use This Component?
- Responsive grid that adapts to screen width without custom breakpoint CSS.
- Iconify integration — pass any Iconify icon identifier for visual variety.
- Preset-aware — card styling, spacing, and typography adapt to the active preset.
Usage
Options
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<{ icon?: string | IconifyIcon, title: string, description: string | ReactNode }> | — | Feature card data. Required. |
heading | string | undefined | undefined | Optional section heading above the grid. |
surface | 'alt' | undefined | undefined | Set to 'alt' to use the alternate surface background. |
Troubleshooting
- Icons not rendering — The
iconfield is optional per item. If set, pass a valid Iconify identifier (e.g.,'lucide:rocket'). The@iconify/reactpackage must be available. - Grid layout — Items render in a 3-column grid on desktop. If fewer than 3 items are provided, the grid still uses 3 columns with empty space.