Remote Job Card

Remote role on a violet gradient with timezone, comp and type chips plus apply link — swap role, chips, company and accent.

Type: Image
Format: Instagram Post · 1:1
Orientation: Square

Variables

Open in editor

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

Customize Remote Job Card

Remote Job Card is a ready-to-render HR / recruiting image design formatted for Instagram Post · 1:1 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

REMOTE

scopeText

WORLDWIDE

roleTitleText

Staff Backend Engineer

departmentText

Platform Team

tzValueText

UTC-5 to +2

compValueText

$120K-$150K

commitValueText

Full-time

applyUrlText

join.acme.dev

refText

REQ-4471 · Posted today

companyText

Acme

monogramText

accentColor

#8B7CF6

inkColor

#0E1015

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-hr-remote-job",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0E1015",
  "variables": {
    "eyebrow": "REMOTE",
    "scope": "WORLDWIDE",
    "roleTitle": "Staff Backend Engineer",
    "department": "Platform Team",
    "tzValue": "UTC-5 to +2",
    "compValue": "$120K-$150K",
    "commitValue": "Full-time",
    "applyUrl": "join.acme.dev",
    "ref": "REQ-4471 · Posted today",
    "company": "Acme",
    "monogram": "A",
    "accent": "#8B7CF6",
    "ink": "#0E1015"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#171331'/><stop offset='0.55' stop-color='#0E1015'/><stop offset='1' stop-color='#0A0A10'/></linearGradient><radialGradient id='glow' cx='0.86' cy='0.1' r='0.7'><stop offset='0' stop-color='#8B7CF6' stop-opacity='0.4'/><stop offset='1' stop-color='#8B7CF6' stop-opacity='0'/></radialGradient><radialGradient id='glow2' cx='0.02' cy='1' r='0.75'><stop offset='0' stop-color='#5B8DEF' stop-opacity='0.2'/><stop offset='1' stop-color='#5B8DEF' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#bg)'/><rect width='1080' height='1080' fill='url(#glow)'/><rect width='1080' height='1080' fill='url(#glow2)'/><rect x='28' y='28' width='1024' height='1024' rx='32' fill='none' stroke='#FFFFFF' stroke-opacity='0.09' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 84,
      "width": 420,
      "height": 52,
      "anchor": "top-left",
      "track": 3,
      "svg": "<svg width='420' height='52' viewBox='0 0 420 52' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='400' height='52' rx='26' fill='#8B7CF6' fill-opacity='0.16' stroke='{{accent}}' stroke-opacity='0.6' stroke-width='1.3'/><circle cx='32' cy='26' r='7' fill='{{accent}}'/><text x='54' y='34' font-family='Space Grotesk, Arial' font-size='21' font-weight='700' letter-spacing='3' fill='#D6CEF9'>{{eyebrow}} · {{scope}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 900,
      "y": 82,
      "width": 150,
      "height": 56,
      "anchor": "top-left",
      "track": 3,
      "svg": "<svg width='150' height='56' viewBox='0 0 150 56' xmlns='http://www.w3.org/2000/svg'><circle cx='24' cy='28' r='16' fill='{{accent}}'/><text x='24' y='36' font-family='Space Grotesk, Arial' font-size='20' font-weight='700' fill='{{ink}}' text-anchor='middle'>{{monogram}}</text><text x='50' y='35' font-family='Space Grotesk, Arial' font-size='23' font-weight='600' fill='#F4F2FB'>{{company}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 70,
      "y": 300,
      "width": 900,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Sora"
      },
      "html": "<div style='font-size:96px; font-weight:800; line-height:0.98; letter-spacing:-0.03em; color:#F4F2FB;'>{{roleTitle}}</div><div style='margin-top:18px; font-size:30px; font-weight:500; letter-spacing:0.01em; color:#9E9AB8;'>{{department}}</div>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 636,
      "width": 936,
      "height": 96,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='936' height='96' viewBox='0 0 936 96' xmlns='http://www.w3.org/2000/svg'><g><rect x='0' y='0' width='296' height='96' rx='20' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.1' stroke-width='1'/><text x='24' y='38' font-family='Space Grotesk, Arial' font-size='16' font-weight='600' letter-spacing='2.5' fill='{{accent}}'>TIMEZONE</text><text x='24' y='72' font-family='Space Grotesk, Arial' font-size='27' font-weight='700' fill='#F4F2FB'>{{tzValue}}</text></g><g><rect x='320' y='0' width='296' height='96' rx='20' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.1' stroke-width='1'/><text x='344' y='38' font-family='Space Grotesk, Arial' font-size='16' font-weight='600' letter-spacing='2.5' fill='{{accent}}'>COMP</text><text x='344' y='72' font-family='Space Grotesk, Arial' font-size='27' font-weight='700' fill='#F4F2FB'>{{compValue}}</text></g><g><rect x='640' y='0' width='296' height='96' rx='20' fill='#FFFFFF' fill-opacity='0.05' stroke='#FFFFFF' stroke-opacity='0.1' stroke-width='1'/><text x='664' y='38' font-family='Space Grotesk, Arial' font-size='16' font-weight='600' letter-spacing='2.5' fill='{{accent}}'>TYPE</text><text x='664' y='72' font-family='Space Grotesk, Arial' font-size='27' font-weight='700' fill='#F4F2FB'>{{commitValue}}</text></g></svg>"
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 936,
      "width": 936,
      "height": 60,
      "anchor": "top-left",
      "track": 7,
      "svg": "<svg width='936' height='60' viewBox='0 0 936 60' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='6' width='420' height='54' rx='27' fill='{{accent}}'/><text x='34' y='40' font-family='Space Grotesk, Arial' font-size='22' font-weight='700' fill='{{ink}}'>Apply · {{applyUrl}}</text><text x='936' y='40' font-family='IBM Plex Mono, monospace' font-size='18' font-weight='500' letter-spacing='0.5' fill='#8B88A0' text-anchor='end'>{{ref}}</text></svg>"
    }
  ]
}