# Feature Bento Grid

> Render mixed-priority feature cards in a bento layout.

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

`feature_bento_grid` creates an editorial feature block with one dominant card and smaller supporting cards.

## When to Use

Use it when one capability is clearly the lead story and the rest should reinforce it.

## Usage

```markdown
{{/* feature_bento_grid(title="Platform", item_1_title="Core workflow") */}}
```

## Live Example

{{ feature_bento_grid(
container="md",
eyebrow="Bento",
title="Feature hierarchy without visual noise",
description="Lead with the strongest capability, then surround it with secondary proof.",
item_1_icon="workflow",
item_1_title="Structured workflow",
item_1_desc="A large card provides enough room for the primary narrative.",
item_1_meta="Primary",
item_2_icon="zap",
item_2_title="Fast",
item_2_desc="Static output stays quick.",
item_3_icon="shield-check",
item_3_title="Safe",
item_3_desc="Borders and tokens stay predictable."
) }}

## Parameters

| Parameter      | Description                                  |
| -------------- | -------------------------------------------- |
| `container`    | Inner content width.                         |
| `eyebrow`      | Small uppercase label above the heading.     |
| `title`        | Section heading.                             |
| `description`  | Supporting copy.                             |
| `item_N_icon`  | Optional icon for feature `N`.               |
| `item_N_title` | Feature title, up to 5.                      |
| `item_N_desc`  | Feature description.                         |
| `item_N_meta`  | Optional metadata label.                     |
| `bg`           | Full-width section background token.         |
| `class`        | Additional CSS classes on the outer section. |