# Metrics grid OG image template

Up to four KPI tiles with value, label and a green or red change, under a title and period.

- Slug: `metrics-grid`
- Preview (real render): https://shareglint.com/img/templates/metrics-grid.jpg
- Page: https://shareglint.com/en/templates/metrics-grid

For monthly updates, open-startup pages, investor notes and status reports. Each tile gets its number, what it measures and how it moved — a change starting with a minus turns red with a down arrow, anything else is green. Tiles sit in a row on wide formats and in a 2×2 grid on square and vertical ones.

## Fields

Every field is optional. Long text shrinks to fit instead of overflowing; an image field takes a public URL that we fetch on our side.

| Field | Type | Description | Example |
|---|---|---|---|
| `title` | text | Headline of the report. (default: Monthly report) | October in numbers |
| `period` | text | Period in the corner pill, e.g. Oct 2026. | Oct 2026 |
| `product` | text | Product or company name next to the logo. | Northwind |
| `metric_1` | text | Value of the first tile, e.g. $48.2k. | $48.2k |
| `label_1` | text | What the first value measures. | Monthly recurring revenue |
| `delta_1` | text | Change of the first value, e.g. +12.4% or -0.6 pt. | +12.4% |
| `metric_2` | text | Value of the second tile. | 3,910 |
| `label_2` | text | What the second value measures. | Active teams |
| `delta_2` | text | Change of the second value. | +318 |
| `metric_3` | text | Value of the third tile. | 2.1% |
| `label_3` | text | What the third value measures. | Monthly churn |
| `delta_3` | text | Change of the third value. | -0.6 pt |
| `metric_4` | text | Value of the fourth tile. | 61 |
| `label_4` | text | What the fourth value measures. | Net promoter score |
| `delta_4` | text | Change of the fourth value. | +4 |
| `site` | text | Your domain or a short URL. | northwind.dev/open |
| `logo` | image URL | Logo image. | https://example.com/images/logo-northwind.png |
| `accent` | colour | Brand colour as hex, e.g. #6366f1. Drives buttons, highlights and the background glow. (default: #22c55e) | #22c55e |
| `theme` | dark | light | Colour scheme: dark or light. | — |

## Render it with one request

```bash
curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "metrics-grid",
    "modifications": {
        "title": "October in numbers",
        "period": "Oct 2026",
        "product": "Northwind",
        "metric_1": "$48.2k",
        "label_1": "Monthly recurring revenue",
        "delta_1": "+12.4%",
        "metric_2": "3,910",
        "label_2": "Active teams",
        "delta_2": "+318",
        "metric_3": "2.1%",
        "label_3": "Monthly churn",
        "delta_3": "-0.6 pt",
        "metric_4": "61",
        "label_4": "Net promoter score",
        "delta_4": "+4",
        "site": "northwind.dev/open",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'
```

## Make it yours

accent and theme change per request. For anything more, copy the template into your account: you get an ordinary HTML template with the same fields that you can edit in the dashboard or through the API. If the slug is free on your account, the copy takes it — your integrations switch to your version without changing a line.

```bash
curl -X POST "https://shareglint.com/v1/templates/library/metrics-grid/copy" -H "Authorization: Bearer sk_live_YOUR_KEY"
```