# Szablon obrazka OG: Siatka wskaźników

Do czterech kafelków z wartością, opisem i zmianą na zielono albo czerwono, pod tytułem i okresem.

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

Do comiesięcznych podsumowań, stron open startup, notek dla inwestorów i raportów. Każdy kafelek ma swoją liczbę, opis i zmianę — zmiana zaczynająca się od minusa robi się czerwona ze strzałką w dół, każda inna zielona. Na szerokich formatach kafelki stoją w rzędzie, na kwadracie i w pionie w siatce 2×2.

## Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

| Pole | Typ | Opis | Przykład |
|---|---|---|---|
| `title` | tekst | Tytuł raportu. (domyślnie: Monthly report) | October in numbers |
| `period` | tekst | Okres w plakietce w rogu, np. paź 2026. | Oct 2026 |
| `product` | tekst | Nazwa produktu albo firmy obok logo. | Northwind |
| `metric_1` | tekst | Wartość pierwszego kafelka, np. 48,2 tys. zł. | $48.2k |
| `label_1` | tekst | Co mierzy pierwsza wartość. | Monthly recurring revenue |
| `delta_1` | tekst | Zmiana pierwszej wartości, np. +12,4% albo -0,6 pkt. | +12.4% |
| `metric_2` | tekst | Wartość drugiego kafelka. | 3,910 |
| `label_2` | tekst | Co mierzy druga wartość. | Active teams |
| `delta_2` | tekst | Zmiana drugiej wartości. | +318 |
| `metric_3` | tekst | Wartość trzeciego kafelka. | 2.1% |
| `label_3` | tekst | Co mierzy trzecia wartość. | Monthly churn |
| `delta_3` | tekst | Zmiana trzeciej wartości. | -0.6 pt |
| `metric_4` | tekst | Wartość czwartego kafelka. | 61 |
| `label_4` | tekst | Co mierzy czwarta wartość. | Net promoter score |
| `delta_4` | tekst | Zmiana czwartej wartości. | +4 |
| `site` | tekst | Twoja domena albo krótki adres. | northwind.dev/open |
| `logo` | adres obrazka | Logo. | https://example.com/images/logo-northwind.png |
| `accent` | kolor | Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. (domyślnie: #22c55e) | #22c55e |
| `theme` | dark | light | Schemat kolorów: dark albo light. | — |

## Wyrenderuj go jednym żądaniem

```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"
    }
}'
```

## Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

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