metrics-grid

Metrics grid OG image template

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

Metrics grid Open Graph image template rendered by Shareglint
Metrics grid template at square size (1080×1080)
Metrics grid template at portrait size (1080×1350)
Metrics grid template at story size (1080×1920)
Metrics grid template at pinterest size (1000×1500)
Metrics grid template at youtube size (1280×720)

These are real renders from the API with the example values in the table below. Switch the size above: the same template lays itself out for all 6 sizes — send size or sizes with the request.

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

Use the slug as template. The response holds the URL of the finished PNG; ?wait=true keeps the connection open until it is ready.

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

Or paste a signed URL into og:image

For static sites, Webflow, Shopify and no-code tools: put the fields in the query string and sign it with your signing secret. The first request renders the image, every later one is a redirect to the cached file. How to compute the signature.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/metrics-grid.png?delta_1=%2B12.4%25&delta_2=%2B318&delta_3=-0.6%20pt&delta_4=%2B4&label_1=Monthly%20recurring%20revenue&label_2=Active%20teams&label_3=Monthly%20churn&label_4=Net%20promoter%20score&metric_1=%2448.2k&metric_2=3%2C910&metric_3=2.1%25&metric_4=61&period=Oct%202026&product=Northwind&site=northwind.dev%2Fopen&title=October%20in%20numbers&s=YOUR_SIGNATURE">

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.

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

More OG image templates

All templates →