Monthly KPI Card

Monthly KPI snapshot: four stat tiles with delta pills and a revenue sparkline — swap the month, values, deltas and accent.

Type: Image
Format: Twitter · 16:9
Orientation: Landscape

Variables

Open in editor

Free template · opens in the editor, no account required.

Customize Monthly KPI Card

Monthly KPI Card is a ready-to-render Data viz / reports image design formatted for Twitter · 16:9 and support for variables. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

16 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

MONTHLY SNAPSHOT

monthText

March 2026

subtitleText

Growth performance overview

kpi1LabelText

REVENUE

kpi1ValueText

$48.2K

kpi1DeltaText

+12.4%

kpi2LabelText

NEW USERS

kpi2ValueText

3,910

kpi2DeltaText

+8.1%

kpi3LabelText

CHURN

kpi3ValueText

1.8%

kpi3DeltaText

-0.6%

kpi4LabelText

NPS SCORE

kpi4ValueText

kpi4DeltaText

accentColor

#C6F24E

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-report-monthly-kpi",
  "resolution": "twitter-landscape",
  "outputFormat": "png",
  "backgroundColor": "#0B0B12",
  "variables": {
    "eyebrow": "MONTHLY SNAPSHOT",
    "month": "March 2026",
    "subtitle": "Growth performance overview",
    "kpi1Label": "REVENUE",
    "kpi1Value": "$48.2K",
    "kpi1Delta": "+12.4%",
    "kpi2Label": "NEW USERS",
    "kpi2Value": "3,910",
    "kpi2Delta": "+8.1%",
    "kpi3Label": "CHURN",
    "kpi3Value": "1.8%",
    "kpi3Delta": "-0.6%",
    "kpi4Label": "NPS SCORE",
    "kpi4Value": "72",
    "kpi4Delta": "+5",
    "accent": "#C6F24E"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1200,
      "height": 675,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1200' height='675' viewBox='0 0 1200 675' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#101018'/><stop offset='0.6' stop-color='#0B0B12'/><stop offset='1' stop-color='#08080D'/></linearGradient><radialGradient id='glow' cx='0.9' cy='0.06' r='0.55'><stop offset='0' stop-color='{{accent}}' stop-opacity='0.16'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='675' fill='url(#bg)'/><rect width='1200' height='675' fill='url(#glow)'/><rect x='24' y='24' width='1152' height='627' rx='28' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 60,
      "width": 320,
      "height": 34,
      "anchor": "top-left",
      "track": 3,
      "svg": "<svg width='320' height='34' viewBox='0 0 320 34' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='260' height='34' rx='17' fill='{{accent}}' fill-opacity='0.12' stroke='{{accent}}' stroke-opacity='0.45' stroke-width='1'/><circle cx='22' cy='17' r='4' fill='{{accent}}'/><text x='38' y='23' font-family='Space Grotesk, Arial' font-size='14' font-weight='600' letter-spacing='2.5' fill='{{accent}}'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 108,
      "width": 760,
      "anchor": "top-left",
      "track": 4,
      "text": "{{month}}",
      "style": {
        "fontFamily": "Archivo",
        "fontSize": "70px",
        "fontWeight": "800",
        "letterSpacing": "-0.02em",
        "lineHeight": "1",
        "color": "#F4F2FB"
      }
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 190,
      "width": 760,
      "anchor": "top-left",
      "track": 4,
      "text": "{{subtitle}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "500",
        "color": "#8F8CA3"
      }
    },
    {
      "type": "SVG",
      "x": 940,
      "y": 66,
      "width": 188,
      "height": 40,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='188' height='40' viewBox='0 0 188 40' xmlns='http://www.w3.org/2000/svg'><circle cx='16' cy='20' r='9' fill='{{accent}}'/><text x='34' y='27' font-family='Space Grotesk, Arial' font-size='20' font-weight='700' letter-spacing='0.5' fill='#FFFFFF'>zvid</text><text x='92' y='27' font-family='Space Grotesk, Arial' font-size='20' font-weight='400' letter-spacing='0.5' fill='#8F8CA3'>report</text></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 262,
      "width": 1056,
      "height": 168,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='1056' height='168' viewBox='0 0 1056 168' xmlns='http://www.w3.org/2000/svg'><g><rect x='0' y='0' width='246' height='168' rx='20' fill='#14141C' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1'/><text x='24' y='40' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#8F8CA3'>{{kpi1Label}}</text><text x='24' y='102' font-family='Archivo, Arial' font-size='46' font-weight='800' fill='#F4F2FB'>{{kpi1Value}}</text><polygon points='24,140 34,140 29,130' fill='{{accent}}'/><text x='44' y='144' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{accent}}'>{{kpi1Delta}}</text></g><g transform='translate(270,0)'><rect x='0' y='0' width='246' height='168' rx='20' fill='#14141C' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1'/><text x='24' y='40' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#8F8CA3'>{{kpi2Label}}</text><text x='24' y='102' font-family='Archivo, Arial' font-size='46' font-weight='800' fill='#F4F2FB'>{{kpi2Value}}</text><polygon points='24,140 34,140 29,130' fill='{{accent}}'/><text x='44' y='144' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{accent}}'>{{kpi2Delta}}</text></g><g transform='translate(540,0)'><rect x='0' y='0' width='246' height='168' rx='20' fill='#14141C' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1'/><text x='24' y='40' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#8F8CA3'>{{kpi3Label}}</text><text x='24' y='102' font-family='Archivo, Arial' font-size='46' font-weight='800' fill='#F4F2FB'>{{kpi3Value}}</text><polygon points='24,130 34,130 29,140' fill='#FF6B5E'/><text x='44' y='144' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='#FF6B5E'>{{kpi3Delta}}</text></g><g transform='translate(810,0)'><rect x='0' y='0' width='246' height='168' rx='20' fill='#14141C' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1'/><text x='24' y='40' font-family='Space Grotesk, Arial' font-size='15' font-weight='600' letter-spacing='2' fill='#8F8CA3'>{{kpi4Label}}</text><text x='24' y='102' font-family='Archivo, Arial' font-size='46' font-weight='800' fill='#F4F2FB'>{{kpi4Value}}</text><polygon points='24,140 34,140 29,130' fill='{{accent}}'/><text x='44' y='144' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='{{accent}}'>{{kpi4Delta}}</text></g></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 466,
      "width": 1056,
      "height": 150,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='1056' height='150' viewBox='0 0 1056 150' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='spark' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='{{accent}}' stop-opacity='0.28'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0'/></linearGradient></defs><text x='0' y='16' font-family='Space Grotesk, Arial' font-size='14' font-weight='600' letter-spacing='2' fill='#6E6B80'>REVENUE — LAST 8 WEEKS</text><line x1='0' y1='60' x2='1056' y2='60' stroke='#FFFFFF' stroke-opacity='0.05' stroke-width='1'/><line x1='0' y1='100' x2='1056' y2='100' stroke='#FFFFFF' stroke-opacity='0.05' stroke-width='1'/><path d='M20 118 L168 128 L316 96 L464 104 L612 72 L760 84 L908 50 L1036 34 L1036 138 L20 138 Z' fill='url(#spark)'/><polyline points='20,118 168,128 316,96 464,104 612,72 760,84 908,50 1036,34' fill='none' stroke='{{accent}}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><circle cx='1036' cy='34' r='10' fill='{{accent}}' fill-opacity='0.2'/><circle cx='1036' cy='34' r='5' fill='{{accent}}'/></svg>"
    }
  ]
}