Bug Fix Card

Calm patch-notes card with a Fixed check badge, issue chip, one-liner and a red/green code diff — swap ref, description and version.

Type: Image
Format: Open Graph · 1200×630
Orientation: Landscape

Variables

Open in editor

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

Customize Bug Fix Card

Bug Fix Card is a ready-to-render SaaS / dev tools image design formatted for Open Graph · 1200×630 and support for variables. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

13 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

PATCH NOTES

labelText

Fixed

issueRefText

#2481 · renderer

descriptionText

Subtitles no longer drift on variable-frame-rate source clips.

diffMinusText

- await sleep(frameGap)

diffPlusText

+ await syncToPts(frameGap)

versionText

v2.4.1

brandText

zvid

accentColor

#3FB950

inkColorColor

#0A0D0B

cardColorColor

#0F1317

headingColorColor

#EAF2EC

subColorColor

#8FA096

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-saas-bug-fix",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0A0D0B",
  "variables": {
    "eyebrow": "PATCH NOTES",
    "label": "Fixed",
    "issueRef": "#2481 · renderer",
    "description": "Subtitles no longer drift on variable-frame-rate source clips.",
    "diffMinus": "- await sleep(frameGap)",
    "diffPlus": "+ await syncToPts(frameGap)",
    "version": "v2.4.1",
    "brand": "zvid",
    "accent": "#3FB950",
    "inkColor": "#0A0D0B",
    "cardColor": "#0F1317",
    "headingColor": "#EAF2EC",
    "subColor": "#8FA096"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1200,
      "height": 630,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1200' height='630' viewBox='0 0 1200 630' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#0E1A12'/><stop offset='0.55' stop-color='#0A0D0B'/><stop offset='1' stop-color='#080A09'/></linearGradient><radialGradient id='glow' cx='0.15' cy='0.14' r='0.62'><stop offset='0' stop-color='#3FB950' stop-opacity='0.22'/><stop offset='1' stop-color='#3FB950' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='630' fill='url(#bg)'/><rect width='1200' height='630' fill='url(#glow)'/><rect x='24' y='24' width='1152' height='582' rx='28' fill='none' stroke='#FFFFFF' stroke-opacity='0.07' stroke-width='1.5'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 96,
      "width": 500,
      "anchor": "top-left",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.32em",
        "color": "#3FB950"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 144,
      "width": 64,
      "height": 64,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'><circle cx='32' cy='32' r='30' fill='{{accent}}'/><path d='M20 33 L28 41 L44 24' fill='none' stroke='{{inkColor}}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 152,
      "y": 146,
      "width": 400,
      "anchor": "top-left",
      "track": 5,
      "text": "{{label}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "70px",
        "fontWeight": "700",
        "letterSpacing": "-0.02em",
        "color": "#EAF2EC"
      }
    },
    {
      "type": "SVG",
      "x": 344,
      "y": 166,
      "width": 300,
      "height": 44,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='300' height='44' viewBox='0 0 300 44' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='300' height='44' rx='12' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.12' stroke-width='1'/><text x='20' y='29' font-family='IBM Plex Mono, monospace' font-size='18' font-weight='500' fill='{{subColor}}'>{{issueRef}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 74,
      "y": 268,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "text": "{{description}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "31px",
        "fontWeight": "500",
        "lineHeight": "1.35",
        "color": "#C8D2CB"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 372,
      "width": 760,
      "height": 132,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='760' height='132' viewBox='0 0 760 132' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='760' height='132' rx='16' fill='{{cardColor}}' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/><rect x='16' y='20' width='728' height='42' rx='8' fill='#F0645C' fill-opacity='0.09'/><text x='36' y='47' font-family='IBM Plex Mono, monospace' font-size='19' font-weight='500' fill='#F0645C'>{{diffMinus}}</text><rect x='16' y='70' width='728' height='42' rx='8' fill='{{accent}}' fill-opacity='0.11'/><text x='36' y='97' font-family='IBM Plex Mono, monospace' font-size='19' font-weight='500' fill='{{accent}}'>{{diffPlus}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 554,
      "width": 132,
      "height": 44,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='132' height='44' viewBox='0 0 132 44' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='132' height='44' rx='12' fill='{{accent}}' fill-opacity='0.14' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/><text x='66' y='29' font-family='IBM Plex Mono, monospace' font-size='18' font-weight='600' fill='{{accent}}' text-anchor='middle'>{{version}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 1128,
      "y": 558,
      "width": 150,
      "height": 44,
      "anchor": "top-right",
      "track": 6,
      "svg": "<svg width='150' height='44' viewBox='0 0 150 44' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='22' r='7' fill='{{accent}}'/><text x='30' y='29' font-family='Space Grotesk, Arial' font-size='20' font-weight='700' fill='#FFFFFF'>{{brand}}</text></svg>"
    }
  ]
}