Case Study

Agency case-study cover with a giant serif result metric, CASE STUDY tag, client lockup and ROI chip — swap the metric, client and photo.

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

Variablesphoto

Open in editor

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

Customize Case Study

Case Study is a ready-to-render Video thumbnails image design formatted for HD · 16:9 and support for variables, photo. 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.

tagText

CASE STUDY

metricText

3.4×

labelAText

increase in

labelBText

qualified pipeline

labelCText

within the first 90 days

clientText

Northbeam SaaS

sectorText

B2B · Series B

secondaryText

212% ROI

monogramText

accentColor

#6C8CF5

bgImageMedia URL

pexels-photo-1128207.jpeg

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-thumb-case-study",
  "resolution": "hd",
  "outputFormat": "png",
  "backgroundColor": "#0B0D16",
  "variables": {
    "tag": "CASE STUDY",
    "metric": "3.4×",
    "labelA": "increase in",
    "labelB": "qualified pipeline",
    "labelC": "within the first 90 days",
    "client": "Northbeam SaaS",
    "sector": "B2B · Series B",
    "secondary": "212% ROI",
    "monogram": "N",
    "accent": "#6C8CF5",
    "bgImage": "https://images.pexels.com/photos/1128207/pexels-photo-1128207.jpeg?auto=compress&cs=tinysrgb&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{bgImage}}",
      "width": 1280,
      "height": 720,
      "position": "center-center",
      "resize": "cover",
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1280,
      "height": 720,
      "position": "center-center",
      "track": 1,
      "svg": "<svg width='1280' height='720' viewBox='0 0 1280 720' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sx' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='#0B0D16' stop-opacity='0.97'/><stop offset='0.56' stop-color='#0B0D16' stop-opacity='0.66'/><stop offset='1' stop-color='#0B0D16' stop-opacity='0.12'/></linearGradient><linearGradient id='sy' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#0B0D16' stop-opacity='0.9'/><stop offset='0.4' stop-color='#0B0D16' stop-opacity='0'/></linearGradient><radialGradient id='gl' cx='0.14' cy='0.32' r='0.7'><stop offset='0' stop-color='#6C8CF5' stop-opacity='0.24'/><stop offset='1' stop-color='#6C8CF5' stop-opacity='0'/></radialGradient></defs><rect width='1280' height='720' fill='url(#sx)'/><rect width='1280' height='720' fill='url(#sy)'/><rect width='1280' height='720' fill='url(#gl)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 100,
      "width": 240,
      "height": 46,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='240' height='46' viewBox='0 0 240 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='240' height='46' rx='10' fill='#6C8CF5' fill-opacity='0.16' stroke='{{accent}}' stroke-opacity='0.55' stroke-width='1.2'/><circle cx='26' cy='23' r='6' fill='{{accent}}'/><text x='46' y='30' font-family='Space Grotesk, Arial' font-size='19' font-weight='600' letter-spacing='3' fill='#C3D0F9'>{{tag}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 150,
      "width": 620,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "DM Serif Display"
      },
      "html": "<div style='font-size:210px; font-weight:400; line-height:0.9; letter-spacing:-0.02em; color:{{accent}};'>{{metric}}</div>"
    },
    {
      "type": "TEXT",
      "x": 80,
      "y": 402,
      "width": 660,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:38px; font-weight:600; line-height:1.12; letter-spacing:-0.005em; color:#EEF0F7;'>{{labelA}} <span style='color:{{accent}};'>{{labelB}}</span> {{labelC}}</div>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 618,
      "width": 60,
      "height": 60,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='mg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6C8CF5'/><stop offset='1' stop-color='#9DB4FA'/></linearGradient></defs><circle cx='30' cy='30' r='30' fill='url(#mg)'/><text x='30' y='41' font-family='Space Grotesk, Arial' font-size='28' font-weight='700' fill='#0B0D16' text-anchor='middle'>{{monogram}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 156,
      "y": 622,
      "width": 500,
      "anchor": "top-left",
      "track": 6,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:26px; font-weight:700; color:#EEF0F7;'>{{client}}</div><div style='margin-top:3px; font-size:19px; font-weight:500; color:#8A8FA6;'>{{sector}}</div>"
    },
    {
      "type": "SVG",
      "x": 978,
      "y": 628,
      "width": 222,
      "height": 48,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='222' height='48' viewBox='0 0 222 48' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='222' height='48' rx='24' fill='#FFFFFF' fill-opacity='0.06' stroke='#FFFFFF' stroke-opacity='0.14' stroke-width='1'/><path d='M26 30 L32 20 L38 30 Z' fill='{{accent}}'/><rect x='29' y='26' width='6' height='8' fill='{{accent}}'/><text x='58' y='31' font-family='Space Grotesk, Arial' font-size='21' font-weight='700' letter-spacing='0.5' fill='#EEF0F7'>{{secondary}}</text></svg>"
    }
  ]
}