Meet The Team

Team intro with a rounded portrait card, name, role and one-line bio — swap portrait, name, role, bio and accent.

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

Variablesphoto

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

Customize Meet The Team

Meet The Team is a ready-to-render HR / recruiting 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.

10 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

MEET THE TEAM

nameText

Dana Whitfield

roleText

Head of Design

bioText

Building calm, human interfaces for millions of people every day.

tenureText

With us since 2021

companyText

Northwind

monogramText

accentColor

#4CD4CE

inkColor

#101418

portraitImageMedia URL

pexels-photo-29057425.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-hr-team-intro",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#101418",
  "variables": {
    "eyebrow": "MEET THE TEAM",
    "name": "Dana Whitfield",
    "role": "Head of Design",
    "bio": "Building calm, human interfaces for millions of people every day.",
    "tenure": "With us since 2021",
    "company": "Northwind",
    "monogram": "N",
    "accent": "#4CD4CE",
    "ink": "#101418",
    "portraitImage": "https://images.pexels.com/photos/29057425/pexels-photo-29057425.jpeg?auto=compress&cs=tinysrgb&w=1600"
  },
  "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='#131A20'/><stop offset='0.6' stop-color='#101418'/><stop offset='1' stop-color='#0C0F12'/></linearGradient><radialGradient id='glow' cx='0.82' cy='0.2' r='0.6'><stop offset='0' stop-color='#4CD4CE' stop-opacity='0.28'/><stop offset='1' stop-color='#4CD4CE' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#bg)'/><rect width='1080' height='1080' fill='url(#glow)'/><rect x='28' y='28' width='1024' height='1024' rx='30' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.4'/></svg>"
    },
    {
      "type": "SVG",
      "x": 556,
      "y": 150,
      "width": 476,
      "height": 620,
      "anchor": "top-left",
      "track": 2,
      "svg": "<svg width='476' height='620' viewBox='0 0 476 620' xmlns='http://www.w3.org/2000/svg'><rect x='18' y='18' width='458' height='602' rx='36' fill='{{accent}}' fill-opacity='0.9'/></svg>"
    },
    {
      "type": "IMAGE",
      "src": "{{portraitImage}}",
      "width": 458,
      "height": 602,
      "x": 556,
      "y": 132,
      "anchor": "top-left",
      "radius": {
        "tl": 32,
        "tr": 32,
        "bl": 32,
        "br": 32
      },
      "track": 3
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 150,
      "width": 400,
      "height": 12,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='400' height='12' viewBox='0 0 400 12' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='4' width='120' height='4' rx='2' fill='{{accent}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 176,
      "width": 460,
      "anchor": "top-left",
      "track": 5,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "22px",
        "fontWeight": "600",
        "letterSpacing": "0.3em",
        "color": "#4CD4CE"
      }
    },
    {
      "type": "TEXT",
      "x": 68,
      "y": 258,
      "width": 470,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Syne"
      },
      "html": "<div style='font-size:60px; font-weight:800; line-height:1.0; letter-spacing:-0.03em; color:#F4F2FB;'>{{name}}</div>"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 470,
      "width": 460,
      "anchor": "top-left",
      "track": 5,
      "text": "{{role}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "34px",
        "fontWeight": "600",
        "letterSpacing": "0em",
        "color": "#4CD4CE"
      }
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 540,
      "width": 448,
      "anchor": "top-left",
      "track": 5,
      "text": "{{bio}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "27px",
        "fontWeight": "400",
        "lineHeight": "1.4",
        "color": "#A9AEB6"
      }
    },
    {
      "type": "SVG",
      "x": 72,
      "y": 900,
      "width": 460,
      "height": 60,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='460' height='60' viewBox='0 0 460 60' xmlns='http://www.w3.org/2000/svg'><circle cx='30' cy='30' r='28' fill='none' stroke='{{accent}}' stroke-width='1.6'/><text x='30' y='39' font-family='Space Grotesk, Arial' font-size='24' font-weight='700' fill='{{accent}}' text-anchor='middle'>{{monogram}}</text><text x='76' y='27' font-family='Space Grotesk, Arial' font-size='23' font-weight='600' fill='#F4F2FB'>{{company}}</text><text x='76' y='52' font-family='Space Grotesk, Arial' font-size='19' font-weight='500' fill='#818892'>{{tenure}}</text></svg>"
    }
  ]
}