# Features Grid

> Render equal feature cards in a responsive grid.

Canonical HTML: https://press.varavel.com/docs/shortcodes/features-grid/
Markdown: https://press.varavel.com/docs/shortcodes/features-grid/index.md

`features_grid` renders compact feature cards with optional icons, badges, and links.

## When to Use

Use it when each feature has similar importance and similar copy length. It is ideal for landing page benefit sections.

## Usage

```markdown
{{/* features_grid(
title="Everything you need",
item_1_icon="zap",
item_1_title="Fast",
item_1_desc="Static output with minimal JavaScript."
) */}}
```

## Live Example

{{ features_grid(
container="md",
title="Everything you need",
item_1_icon="zap",
item_1_title="Fast",
item_1_desc="Static output with minimal JavaScript.",
item_2_icon="shield-check",
item_2_title="Structured",
item_2_desc="Design-system tokens keep pages consistent.",
item_3_icon="workflow",
item_3_title="Composable",
item_3_desc="Build pages from focused sections."
) }}

## Parameters

| Parameter      | Description                                  |
| -------------- | -------------------------------------------- |
| `container`    | Inner content width for the feature grid.    |
| `eyebrow`      | Small uppercase label above the heading.     |
| `title`        | Section heading.                             |
| `description`  | Supporting copy below the heading.           |
| `columns`      | Desktop column count. Use `2`, `3`, or `4`.  |
| `item_N_icon`  | Optional icon for feature `N`.               |
| `item_N_title` | Feature title for item `N`.                  |
| `item_N_desc`  | Feature description for item `N`.            |
| `item_N_badge` | Optional badge text for item `N`.            |
| `item_N_href`  | Optional link URL for item `N`.              |
| `item_N_link`  | Optional link label for item `N`.            |
| `bg`           | Full-width section background token.         |
| `class`        | Additional CSS classes on the outer section. |