# Metrics Panel

> Render narrative proof beside a metric card grid.

Canonical HTML: https://press.varavel.com/docs/shortcodes/metrics-panel/
Markdown: https://press.varavel.com/docs/shortcodes/metrics-panel/index.md

`metrics_panel` pairs explanatory copy with a bordered metric grid for stronger quantitative proof.

## When to Use

Use it when metrics need context and should not be reduced to a simple strip.

## Usage

```markdown
{{/* metrics_panel(title="Proof", metric_1_value="99%", metric_1_label="Uptime") */}}
```

## Live Example

{{ metrics_panel(
container="md",
eyebrow="Proof",
title="Quantify the outcome",
description="Use metrics beside checklist details to connect numbers with product behavior.",
check_1="Designed for static performance",
check_2="Uses semantic design tokens",
metric_1_value="24",
metric_1_label="New shortcodes",
metric_2_value="1",
metric_2_label="Breakpoint",
metric_3_value="0",
metric_3_label="External UI dependencies",
metric_4_value="100%",
metric_4_label="Theme integrated"
) }}

## Parameters

| Parameter        | Description                                  |
| ---------------- | -------------------------------------------- |
| `container`      | Inner content width.                         |
| `eyebrow`        | Small uppercase label above the heading.     |
| `title`          | Section heading.                             |
| `description`    | Supporting copy.                             |
| `metric_N_value` | Metric value, up to 4.                       |
| `metric_N_label` | Metric label.                                |
| `check_N`        | Checklist item, up to 4.                     |
| `reverse`        | Use `true` to place metrics first.           |
| `bg`             | Full-width section background token.         |
| `class`          | Additional CSS classes on the outer section. |