Podcast Quote

Square podcast pull-quote with a speaker photo, waveform motif and episode chip — swap the quote, speaker, role, photo, episode and accent.

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

Variablesphoto

Open in editor

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

Customize Podcast Quote

Podcast Quote is a ready-to-render Content creator / social image design formatted for Instagram Post · 1:1 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

12 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.

showLabelText

THE BUILD PODCAST

episodeText

EP. 42

quotePreText

The best product decisions feel

highlightText

obvious

quotePostText

in hindsight and terrifying in the moment.

speakerNameText

Priya Raman

speakerRoleText

Founder, Loop Labs

speakerImageMedia URL

pexels-photo-7598553.jpeg

inkColor

#0D0B14

offWhiteColor

#F0EEF6

mutedColor

#8B87A0

accentColor

#2DD4BF

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-social-podcast-quote",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0D0B14",
  "variables": {
    "showLabel": "THE BUILD PODCAST",
    "episode": "EP. 42",
    "quotePre": "The best product decisions feel",
    "highlight": "obvious",
    "quotePost": "in hindsight and terrifying in the moment.",
    "speakerName": "Priya Raman",
    "speakerRole": "Founder, Loop Labs",
    "speakerImage": "https://images.pexels.com/photos/7598553/pexels-photo-7598553.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "ink": "#0D0B14",
    "offWhite": "#F0EEF6",
    "muted": "#8B87A0",
    "accent": "#2DD4BF"
  },
  "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='#101A1B'/><stop offset='0.5' stop-color='#0D0B14'/><stop offset='1' stop-color='#09070F'/></linearGradient><radialGradient id='gl' cx='0.14' cy='0.16' r='0.7'><stop offset='0' stop-color='{{accent}}' stop-opacity='0.22'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#bg)'/><rect width='1080' height='1080' fill='url(#gl)'/><rect x='40' y='40' width='1000' height='1000' rx='30' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 92,
      "width": 320,
      "height": 48,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='320' height='48' viewBox='0 0 320 48' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='320' height='48' rx='24' fill='{{accent}}' fill-opacity='0.14' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/><circle cx='28' cy='24' r='6' fill='{{accent}}'/><text x='50' y='31' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' letter-spacing='3' fill='{{accent}}'>{{showLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 848,
      "y": 92,
      "width": 152,
      "height": 48,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='152' height='48' viewBox='0 0 152 48' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='152' height='48' rx='24' fill='#FFFFFF' fill-opacity='0.06' stroke='#FFFFFF' stroke-opacity='0.14' stroke-width='1'/><text x='76' y='31' font-family='Space Grotesk, Arial' font-size='19' font-weight='700' letter-spacing='2' fill='#CFCBDE' text-anchor='middle'>{{episode}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 200,
      "width": 520,
      "height": 72,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='520' height='72' viewBox='0 0 520 72' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='30' width='6' height='12' rx='3' fill='{{accent}}' fill-opacity='0.5'/><rect x='16' y='22' width='6' height='28' rx='3' fill='{{accent}}' fill-opacity='0.6'/><rect x='32' y='8' width='6' height='56' rx='3' fill='{{accent}}'/><rect x='48' y='26' width='6' height='20' rx='3' fill='{{accent}}' fill-opacity='0.6'/><rect x='64' y='16' width='6' height='40' rx='3' fill='{{accent}}' fill-opacity='0.8'/><rect x='80' y='30' width='6' height='12' rx='3' fill='{{accent}}' fill-opacity='0.5'/><rect x='96' y='4' width='6' height='64' rx='3' fill='{{accent}}'/><rect x='112' y='24' width='6' height='24' rx='3' fill='{{accent}}' fill-opacity='0.6'/><rect x='128' y='18' width='6' height='36' rx='3' fill='{{accent}}' fill-opacity='0.8'/><rect x='144' y='30' width='6' height='12' rx='3' fill='{{accent}}' fill-opacity='0.5'/><rect x='160' y='12' width='6' height='48' rx='3' fill='{{accent}}' fill-opacity='0.9'/><rect x='176' y='28' width='6' height='16' rx='3' fill='{{accent}}' fill-opacity='0.5'/><rect x='192' y='20' width='6' height='32' rx='3' fill='{{accent}}' fill-opacity='0.7'/><rect x='208' y='10' width='6' height='52' rx='3' fill='{{accent}}'/><rect x='224' y='30' width='6' height='12' rx='3' fill='{{accent}}' fill-opacity='0.4'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 66,
      "y": 250,
      "width": 300,
      "anchor": "top-left",
      "track": 2,
      "opacity": 0.16,
      "text": "“",
      "style": {
        "fontFamily": "DM Serif Display",
        "fontSize": "220px",
        "fontWeight": "400",
        "lineHeight": "1",
        "color": "{{accent}}"
      }
    },
    {
      "type": "TEXT",
      "x": 80,
      "y": 356,
      "width": 916,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "DM Serif Display"
      },
      "html": "<div style='font-size:66px; font-weight:400; line-height:1.14; letter-spacing:-0.01em; color:{{offWhite}};'>{{quotePre}} <span style='color:{{accent}};'>{{highlight}}</span> {{quotePost}}</div>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 858,
      "width": 920,
      "height": 2,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='920' height='2' viewBox='0 0 920 2' xmlns='http://www.w3.org/2000/svg'><rect width='920' height='1' fill='#FFFFFF' fill-opacity='0.1'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 898,
      "width": 96,
      "height": 96,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='96' height='96' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><circle cx='48' cy='48' r='47' fill='none' stroke='{{accent}}' stroke-width='2'/></svg>"
    },
    {
      "type": "IMAGE",
      "src": "{{speakerImage}}",
      "x": 86,
      "y": 904,
      "width": 84,
      "height": 84,
      "anchor": "top-left",
      "radius": {
        "tl": 42,
        "tr": 42,
        "bl": 42,
        "br": 42
      },
      "track": 7
    },
    {
      "type": "TEXT",
      "x": 196,
      "y": 910,
      "width": 620,
      "anchor": "top-left",
      "track": 7,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:28px; font-weight:600; color:{{offWhite}};'>{{speakerName}}</div><div style='margin-top:3px; font-size:20px; font-weight:500; color:{{muted}};'>{{speakerRole}}</div>"
    }
  ]
}