Comparison Card

Centered X-vs-Y comparison card with a VS monogram badge, two labels, tags and a verdict line — swap names, tags, verdict and accent.

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

Variables

Open in editor

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

Customize Comparison Card

Comparison Card is a ready-to-render Open Graph / blog 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.

11 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

HEAD TO HEAD

leftNameText

Zvid

rightNameText

DIY FFmpeg

vsText

leftTagText

Managed API

rightTagText

Manual scripts

verdictText

One API call versus a weekend of shell scripts.

footerText

zvid.io/compare

accentColor

#8B7CF6

inkColor

#F2F0FB

mutedColor

#8C8AA0

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-og-comparison",
  "resolution": "custom",
  "width": 1200,
  "height": 630,
  "outputFormat": "png",
  "backgroundColor": "#0D0D13",
  "variables": {
    "eyebrow": "HEAD TO HEAD",
    "leftName": "Zvid",
    "rightName": "DIY FFmpeg",
    "vs": "VS",
    "leftTag": "Managed API",
    "rightTag": "Manual scripts",
    "verdict": "One API call versus a weekend of shell scripts.",
    "footer": "zvid.io/compare",
    "accent": "#8B7CF6",
    "ink": "#F2F0FB",
    "muted": "#8C8AA0"
  },
  "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='#131028'/><stop offset='0.5' stop-color='#0D0D13'/><stop offset='1' stop-color='#0A0A10'/></linearGradient><radialGradient id='g1' cx='0.5' cy='0.42' r='0.55'><stop offset='0' stop-color='#8B7CF6' stop-opacity='0.30'/><stop offset='1' stop-color='#8B7CF6' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='630' fill='url(#bg)'/><rect width='1200' height='630' fill='url(#g1)'/><rect x='24' y='24' width='1152' height='582' rx='26' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/><line x1='600' y1='200' x2='600' y2='360' stroke='#FFFFFF' stroke-opacity='0.1' stroke-width='1'/></svg>"
    },
    {
      "type": "SVG",
      "x": 470,
      "y": 74,
      "width": 260,
      "height": 44,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='260' height='44' viewBox='0 0 260 44' xmlns='http://www.w3.org/2000/svg'><rect x='30' y='0' width='200' height='44' rx='22' fill='#8B7CF6' fill-opacity='0.14' stroke='#8B7CF6' stroke-opacity='0.5' stroke-width='1.2'/><text x='130' y='29' font-family='Space Grotesk, Arial' font-size='16' font-weight='600' letter-spacing='3' fill='#CFC7F8' text-anchor='middle'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 60,
      "y": 240,
      "width": 470,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Bricolage Grotesque"
      },
      "html": "<div style='font-size:60px; font-weight:700; line-height:1.0; letter-spacing:-0.03em; text-align:right; color:{{ink}};'>{{leftName}}</div>"
    },
    {
      "type": "TEXT",
      "x": 668,
      "y": 240,
      "width": 470,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Bricolage Grotesque"
      },
      "html": "<div style='font-size:60px; font-weight:700; line-height:1.0; letter-spacing:-0.03em; text-align:left; color:{{muted}};'>{{rightName}}</div>"
    },
    {
      "type": "SVG",
      "x": 540,
      "y": 226,
      "width": 120,
      "height": 120,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='vg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#8B7CF6'/><stop offset='1' stop-color='#6455C4'/></linearGradient></defs><circle cx='60' cy='60' r='52' fill='#0D0D13' stroke='url(#vg)' stroke-width='2.5'/><circle cx='60' cy='60' r='44' fill='#8B7CF6' fill-opacity='0.12'/><text x='60' y='73' font-family='Bricolage Grotesque, Arial' font-size='38' font-weight='700' fill='#EDEAFB' text-anchor='middle'>{{vs}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 356,
      "y": 372,
      "width": 184,
      "height": 40,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='184' height='40' viewBox='0 0 184 40' xmlns='http://www.w3.org/2000/svg'><rect x='24' y='0' width='160' height='40' rx='20' fill='#8B7CF6' fill-opacity='0.16' stroke='#8B7CF6' stroke-opacity='0.45' stroke-width='1.2'/><text x='104' y='26' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='#D6CFFA' text-anchor='middle'>{{leftTag}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 660,
      "y": 372,
      "width": 184,
      "height": 40,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='184' height='40' viewBox='0 0 184 40' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='160' height='40' rx='20' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.16' stroke-width='1.2'/><text x='80' y='26' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' fill='#9E9CB2' text-anchor='middle'>{{rightTag}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 150,
      "y": 448,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "text": "{{verdict}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "30px",
        "fontWeight": "500",
        "textAlign": "center",
        "lineHeight": "1.4",
        "color": "#B7B4CC"
      }
    },
    {
      "type": "SVG",
      "x": 470,
      "y": 542,
      "width": 320,
      "height": 40,
      "anchor": "top-left",
      "track": 7,
      "svg": "<svg width='320' height='40' viewBox='0 0 320 40' xmlns='http://www.w3.org/2000/svg'><circle cx='104' cy='20' r='6' fill='{{accent}}'/><text x='120' y='27' font-family='Space Grotesk, Arial' font-size='19' font-weight='600' letter-spacing='0.5' fill='#EDEAFB'>{{footer}}</text></svg>"
    }
  ]
}