# Quote card template

> A customer quote or testimonial with the author's name, role, and company. Render it on-brand from an AI agent or the REST API.

Canonical URL: https://vectorfast.ai/render/templates/quote-card
Markdown URL: https://vectorfast.ai/render/templates/quote-card.md
Last modified: 2026-10-30

VectorFast Render is in early access: billing is not connected yet, and API keys are issued to waitlist members as access opens.

## Summary
- Template id: `quote-card` (pin the major version as `quote-card@1`; current version 1.0.0)
- Sizes: 1080×1080, 1200×630 (default 1080×1080)
- Formats: PNG, JPEG, WebP
- Use it for: Testimonials for social and landing pages; Case-study pull quotes; Review highlights

## Previews
- English: ![Quote card template rendered in English at 1080×1080 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/quote-card.png?author=Priya%20Nair&brand=default&company=Northwind&h=1080&quote=Our%20release%20images%20used%20to%20take%20a%20designer%20half%20a%20day.%20Now%20the%20agent%20ships%20them%20with%20the%20changelog.&role=Head%20of%20Growth&w=1080&sig=0f18A9wCI_6W8bpQw6Z7_5SWBGQ1-cWWXSom-p_rCdg)
- Chinese: ![Quote card template rendered in Chinese at 1080×1080 with the built-in VectorFast brand kit.](https://vectorfast.ai/i/quote-card.png?author=%E7%8E%8B%E4%BD%B3%E5%AE%81&brand=default&company=%E5%8C%97%E9%A3%8E%E7%A7%91%E6%8A%80&h=1080&quote=%E4%BB%A5%E5%89%8D%E6%AF%8F%E6%AC%A1%E5%8F%91%E7%89%88%E9%83%BD%E8%A6%81%E7%AD%89%E8%AE%BE%E8%AE%A1%E5%B8%88%E6%8E%92%E6%9C%9F%E5%81%9A%E5%9B%BE%EF%BC%8C%E7%8E%B0%E5%9C%A8%20agent%20%E8%B7%9F%E7%9D%80%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97%E4%B8%80%E8%B5%B7%E6%8A%8A%E5%9B%BE%E5%87%BA%E5%A5%BD%E4%BA%86%E3%80%82&role=%E5%A2%9E%E9%95%BF%E8%B4%9F%E8%B4%A3%E4%BA%BA&w=1080&sig=U3nhP2qc39wAhCqY9n7TdjruXq90wOJakEBD20Mu4NU)

## Parameters
All string params are trimmed. Limits come from the schema `POST /v1/renders` validates.

| Param | Type | Required | Limit | Notes |
| --- | --- | --- | --- | --- |
| `quote` | string | yes | ≤ 240 chars | The quote without quotation marks; the template draws the opening mark. |
| `author` | string | yes | ≤ 60 chars | Who said it. |
| `role` | string | no | ≤ 60 chars | Job title. |
| `company` | string | no | ≤ 60 chars | Company name. |
| `avatar_url` | image URL | no | — | Image URL. Remote images are not enabled yet (the allowlist is empty), so leave it out; the template draws a fallback. |

## Ask an agent
Prompt:

> Turn this testimonial into a square quote card for LinkedIn: "We stopped opening Figma for release images. Claude makes them from our changelog." — Priya Nair, Head of Growth at Northwind.

The MCP `render` tool call it should become:

```json
{
  "name": "render",
  "arguments": {
    "template": "quote-card",
    "params": {
      "quote": "We stopped opening Figma for release images. Claude makes them from our changelog.",
      "author": "Priya Nair",
      "role": "Head of Growth",
      "company": "Northwind"
    },
    "width": 1080,
    "height": 1080
  }
}
```

## REST
```bash
curl https://vectorfast.ai/v1/renders \
  -H "Authorization: Bearer $VECTORFAST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "template": "quote-card@1",
  "format": "png",
  "width": 1080,
  "height": 1080,
  "params": {
    "quote": "We stopped opening Figma for release images. Claude makes them from our changelog.",
    "author": "Priya Nair",
    "role": "Head of Growth",
    "company": "Northwind"
  }
}'
```

## Signed URL (server-side Node.js)
Per-key signing secrets are not issued yet in early access; until then, reuse the signed `url` that `POST /v1/renders` returns. The algorithm below is what the server verifies. Keep the secret on your server.

```js
import { createHmac } from 'node:crypto'

// Server-side only. Never ship the signing secret to a browser, a mobile app or a repo.
const SIGNING_SECRET = process.env.VECTORFAST_SIGNING_SECRET

function encode(value) {
  return encodeURIComponent(value).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
}

export function signRenderUrl({ template, format = 'png', params, brand, width, height, keyId }, secret = SIGNING_SECRET) {
  const query = {}
  for (const [key, value] of Object.entries(params)) {
    if (value === undefined || value === null)
      continue
    query[key] = typeof value === 'string' ? value : Array.isArray(value) ? JSON.stringify(value) : String(value)
  }
  if (brand) query.brand = brand
  if (keyId) query.k = keyId
  if (width) query.w = String(width)
  if (height) query.h = String(height)

  const canonical = Object.entries(query)
    .map(([key, value]) => [encode(key), encode(value)])
    .sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0))
    .map(([key, value]) => key + '=' + value)
    .join('&')
  const path = '/i/' + template + '.' + format
  const sig = createHmac('sha256', secret).update(path + '?' + canonical).digest('base64url')
  return 'https://vectorfast.ai' + path + '?' + (canonical ? canonical + '&' : '') + 'sig=' + sig
}

const url = signRenderUrl({
  template: 'quote-card',
  format: 'png',
  width: 1080,
  height: 1080,
  params: {
    "quote": "Our release images used to take a designer half a day. Now the agent ships them with the changelog.",
    "author": "Priya Nair",
    "role": "Head of Growth",
    "company": "Northwind"
  },
})
```

## FAQ
### Which sizes does the quote-card template support?
1080×1080, 1200×630. The default is 1080×1080; pass width and height to pick another supported size.

### Which parameters are required?
quote and author. Every other parameter is optional and has a rendering default.

### Does rendering the same parameters twice cost twice?
No. The same template version, parameters, brand kit version, format, and size produce the same cache key, so a repeat request is served from cache instead of rendering again. Billing is not connected yet in early access.

## Related
- All templates: https://vectorfast.ai/render/templates
- Template reference: https://vectorfast.ai/render/docs/templates
- Connect Claude: https://vectorfast.ai/render/agents/claude