Property listing — starter template

A listing card: the photo full-bleed, a status chip (Just listed, Open house, Sold), and a band with the price, the address, beds, baths and floor area with icons, and the agent's photo, name, phone and office. The full-bleed photo and the band let one call lay it out at every size.

Make it yours

Copy the starter into your account once; from then on it is a template id you render with new variables. Creating and reading templates is free.

curl -s https://api.imageapis.com/v1/starters/property-listing -H 'X-API-Key: YOUR_KEY' | jq .template > property-listing.json
curl -X POST https://api.imageapis.com/v1/templates -H 'X-API-Key: YOUR_KEY' \
  -H 'Content-Type: application/json' -d @property-listing.json
# → { "id": "tpl_…", "object": "template", … }

Change any layer by name at render time with modifications, or change the design itself in the editor and save it back with PUT /v1/templates/<id>.

Layers

Name	Type	x, y	Size	Content
`photo`	image	0, 0	1200 × 630	{{photo}}
`panel`	rect	0, 440	1200 × 190
`status`	text	40, 36	260 × 44	{{status}}
`price`	text	48, 462	560 × 64	{{price}}
`address`	text	48, 528	760 × 34	{{address}}
`beds_icon`	icon	48, 576	28 × 28
`beds`	text	84, 576	130 × 28	{{beds}}
`baths_icon`	icon	228, 576	28 × 28
`baths`	text	264, 576	130 × 28	{{baths}}
`area_icon`	icon	408, 576	28 × 28
`area`	text	444, 576	200 × 28	{{area}}
`agent_photo`	image	872, 470	72 × 72	{{agent_photo}}
`agent`	text	960, 472	200 × 32	{{agent}}
`phone`	text	960, 506	200 × 28	{{phone}}
`office`	text	872, 566	288 × 36	{{office}}

The template

Show the JSON (15 layers)

{
  "name": "Property listing",
  "width": 1200,
  "height": 630,
  "background": "#ffffff",
  "layers": [
    {
      "name": "photo",
      "type": "image",
      "x": 0,
      "y": 0,
      "width": 1200,
      "height": 630,
      "src": "{{photo}}",
      "fit": "cover"
    },
    {
      "name": "panel",
      "type": "rect",
      "x": 0,
      "y": 440,
      "width": 1200,
      "height": 190,
      "fill": "#ffffff"
    },
    {
      "name": "status",
      "type": "text",
      "x": 40,
      "y": 36,
      "width": 260,
      "height": 44,
      "text": "{{status}}",
      "font": "Inter",
      "weight": 800,
      "size": 18,
      "color": "#ffffff",
      "background": "#0f766e",
      "radius": 8,
      "align": "center",
      "valign": "middle",
      "transform": "uppercase",
      "letter_spacing": 2,
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "price",
      "type": "text",
      "x": 48,
      "y": 462,
      "width": 560,
      "height": 64,
      "text": "{{price}}",
      "font": "Inter",
      "weight": 800,
      "size": 52,
      "color": "#0b1220",
      "letter_spacing": -1,
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "address",
      "type": "text",
      "x": 48,
      "y": 528,
      "width": 760,
      "height": 34,
      "text": "{{address}}",
      "font": "Inter",
      "weight": 500,
      "size": 24,
      "color": "#475569",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "beds_icon",
      "type": "icon",
      "icon": "tabler:bed",
      "x": 48,
      "y": 576,
      "width": 28,
      "height": 28,
      "color": "#0f766e"
    },
    {
      "name": "beds",
      "type": "text",
      "x": 84,
      "y": 576,
      "width": 130,
      "height": 28,
      "text": "{{beds}}",
      "font": "Inter",
      "weight": 600,
      "size": 20,
      "color": "#0b1220",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "baths_icon",
      "type": "icon",
      "icon": "tabler:bath",
      "x": 228,
      "y": 576,
      "width": 28,
      "height": 28,
      "color": "#0f766e"
    },
    {
      "name": "baths",
      "type": "text",
      "x": 264,
      "y": 576,
      "width": 130,
      "height": 28,
      "text": "{{baths}}",
      "font": "Inter",
      "weight": 600,
      "size": 20,
      "color": "#0b1220",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "area_icon",
      "type": "icon",
      "icon": "tabler:ruler-2",
      "x": 408,
      "y": 576,
      "width": 28,
      "height": 28,
      "color": "#0f766e"
    },
    {
      "name": "area",
      "type": "text",
      "x": 444,
      "y": 576,
      "width": 200,
      "height": 28,
      "text": "{{area}}",
      "font": "Inter",
      "weight": 600,
      "size": 20,
      "color": "#0b1220",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "agent_photo",
      "type": "image",
      "x": 872,
      "y": 470,
      "width": 72,
      "height": 72,
      "src": "{{agent_photo}}",
      "fit": "cover",
      "radius": 36
    },
    {
      "name": "agent",
      "type": "text",
      "x": 960,
      "y": 472,
      "width": 200,
      "height": 32,
      "text": "{{agent}}",
      "font": "Inter",
      "weight": 700,
      "size": 22,
      "color": "#0b1220",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "phone",
      "type": "text",
      "x": 960,
      "y": 506,
      "width": 200,
      "height": 28,
      "text": "{{phone}}",
      "font": "Inter",
      "weight": 500,
      "size": 18,
      "color": "#475569",
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    },
    {
      "name": "office",
      "type": "text",
      "x": 872,
      "y": 566,
      "width": 288,
      "height": 36,
      "text": "{{office}}",
      "font": "Inter",
      "weight": 800,
      "size": 16,
      "color": "#0f766e",
      "transform": "uppercase",
      "letter_spacing": 2,
      "valign": "middle",
      "fit": "shrink",
      "max_lines": 1
    }
  ]
}