Top 5

Giant number-forward Top 5 listicle cover with index numerals and brand chip — swap the subject photo, category and accent.

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

Variablesphoto

Open in editor

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

Customize Top 5

Top 5 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.

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

THE DEFINITIVE RANKING

topLabelText

TOP

rankNumText

catAText

AI VIDEO

catBText

TOOLS

catCText

RANKED · 2026

brandText

the shortlist

monogramText

accentColor

#FFC400

subjectImageMedia URL

pexels-photo-30133734.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-top5",
  "resolution": "hd",
  "outputFormat": "png",
  "backgroundColor": "#0B0B10",
  "variables": {
    "eyebrow": "THE DEFINITIVE RANKING",
    "topLabel": "TOP",
    "rankNum": "5",
    "catA": "AI VIDEO",
    "catB": "TOOLS",
    "catC": "RANKED · 2026",
    "brand": "the shortlist",
    "monogram": "S",
    "accent": "#FFC400",
    "subjectImage": "https://images.pexels.com/photos/30133734/pexels-photo-30133734.jpeg?auto=compress&cs=tinysrgb&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{subjectImage}}",
      "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='#0B0B10' stop-opacity='0.97'/><stop offset='0.55' stop-color='#0B0B10' stop-opacity='0.62'/><stop offset='1' stop-color='#0B0B10' stop-opacity='0.05'/></linearGradient><linearGradient id='sy' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#0B0B10' stop-opacity='0.88'/><stop offset='0.4' stop-color='#0B0B10' stop-opacity='0'/></linearGradient></defs><rect width='1280' height='720' fill='url(#sx)'/><rect width='1280' height='720' fill='url(#sy)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 104,
      "width": 460,
      "height": 40,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='460' height='40' viewBox='0 0 460 40' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='8' width='26' height='4' rx='2' fill='{{accent}}'/><text x='42' y='27' font-family='Space Grotesk, Arial' font-size='22' font-weight='600' letter-spacing='3' fill='#F0D98A'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 82,
      "y": 158,
      "width": 400,
      "anchor": "top-left",
      "track": 5,
      "text": "{{topLabel}}",
      "style": {
        "fontFamily": "Archivo",
        "fontSize": "70px",
        "fontWeight": "800",
        "letterSpacing": "0.14em",
        "color": "#F5F3EC"
      }
    },
    {
      "type": "TEXT",
      "x": 68,
      "y": 178,
      "width": 400,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Archivo"
      },
      "html": "<div style='font-size:250px; font-weight:800; line-height:0.86; letter-spacing:-0.04em; color:{{accent}};'>{{rankNum}}</div>"
    },
    {
      "type": "TEXT",
      "x": 330,
      "y": 262,
      "width": 340,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:52px; font-weight:700; line-height:1.02; letter-spacing:-0.01em; color:#F5F3EC; text-transform:uppercase;'>{{catA}}<br>{{catB}}</div><div style='margin-top:12px; font-size:24px; font-weight:600; letter-spacing:0.16em; color:{{accent}};'>{{catC}}</div>"
    },
    {
      "type": "SVG",
      "x": 82,
      "y": 626,
      "width": 360,
      "height": 40,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='360' height='40' viewBox='0 0 360 40' xmlns='http://www.w3.org/2000/svg'><text x='0' y='30' font-family='Space Grotesk, Arial' font-size='26' font-weight='700' fill='#54524C'>01</text><text x='66' y='30' font-family='Space Grotesk, Arial' font-size='26' font-weight='700' fill='#54524C'>02</text><text x='132' y='30' font-family='Space Grotesk, Arial' font-size='26' font-weight='700' fill='#54524C'>03</text><text x='198' y='30' font-family='Space Grotesk, Arial' font-size='26' font-weight='700' fill='#54524C'>04</text><text x='264' y='31' font-family='Space Grotesk, Arial' font-size='30' font-weight='800' fill='{{accent}}'>05</text></svg>"
    },
    {
      "type": "SVG",
      "x": 936,
      "y": 634,
      "width": 264,
      "height": 58,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='264' height='58' viewBox='0 0 264 58' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='264' height='58' rx='29' fill='#141410' stroke='#33322C' stroke-width='1.5'/><circle cx='29' cy='29' r='12' fill='{{accent}}'/><text x='29' y='37' font-family='Archivo, Arial' font-size='20' font-weight='800' fill='#0B0B10' text-anchor='middle'>{{monogram}}</text><text x='56' y='37' font-family='Space Grotesk, Arial' font-size='22' font-weight='600' fill='#F5F3EC'>{{brand}}</text></svg>"
    }
  ]
}