---
title: "Quote Card API: Render Branded Pull-Quote Graphics"
description: "Render social pull-quotes with the Quote Card API. POST a quote, attribution, and optional avatar URL, get back a 1200x1200 square PNG for the feed."
url: "https://html2img.com/templates/quote-card/"
---

# Quote Card Image Generator API

Send the quote and attribution as JSON, get back a 1200x1200 square PNG for social sharing.

Editorial teams and B2B SaaS marketing turn customer testimonials and key article excerpts into branded pull-quote graphics with the Quote Card API. The square format reads on Instagram, LinkedIn personal posts, and X without re-cropping, which keeps a single asset reusable across the channels you publish to. You post the quote text, attribution, and optional avatar URL, and the response holds a 1200x1200 PNG hosted on i.html2img.com.

## At a glance

- **Template slug:** `quote-card`
- **Category:** content
- **Endpoint:** `POST https://app.html2img.com/api/v1/templates/quote-card`
- **Authentication:** `X-API-Key` header
- **Cost:** one credit per render, PNG or PDF
- **Page:** https://html2img.com/templates/quote-card/

## Fields

| Field | Type | Required | Example |
| --- | --- | --- | --- |
| `quote` | string | Yes | The thing that surprised me most was how quickly the team adopted it — by the second week, no one was opening the old t… |
| `attribution_name` | string | Yes | Marcus Hale |
| `attribution_role` | string | No | Head of Engineering, Lattice Co |
| `avatar_url` | url | No | https://i.pravatar.cc/160?img=51 |
| `brand_name` | string | No | Northwind |
| `logo_url` | url | No |  |
| `background_color` | string | No | #FAF7F0 |
| `accent_color` | string | No | #7C3AED |

## Defaults

| Field | Default |
| --- | --- |
| `width` | 1200 |
| `height` | 1200 |

## Example request

```bash
curl -X POST https://app.html2img.com/api/v1/templates/quote-card \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"quote":"The thing that surprised me most was how quickly the team adopted it \u2014 by the second week, no one was opening the old tool.","attribution_name":"Marcus Hale","attribution_role":"Head of Engineering, Lattice Co","avatar_url":"https://i.pravatar.cc/160?img=51","brand_name":"Northwind","background_color":"#FAF7F0","accent_color":"#7C3AED"}'
```

## In your language

### PHP

```php
<?php
$response = \Illuminate\Support\Facades\Http::withHeaders([
    'X-API-Key' => 'YOUR_API_KEY',
])->post('https://app.html2img.com/api/v1/templates/quote-card', ['quote' => 'The thing that surprised me most was how quickly the team adopted it — by the second week, no one was opening the old tool.', 'attribution_name' => 'Marcus Hale', 'attribution_role' => 'Head of Engineering, Lattice Co', 'avatar_url' => 'https://i.pravatar.cc/160?img=51', 'brand_name' => 'Northwind', 'background_color' => '#FAF7F0', 'accent_color' => '#7C3AED']);

$url = $response->json('url');
```

### Node.js

```javascript
const response = await fetch('https://app.html2img.com/api/v1/templates/quote-card', {
  method: 'POST',
  headers: {
    'X-API-Key': 'YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    "quote": "The thing that surprised me most was how quickly the team adopted it \u2014 by the second week, no one was opening the old tool.",
    "attribution_name": "Marcus Hale",
    "attribution_role": "Head of Engineering, Lattice Co",
    "avatar_url": "https://i.pravatar.cc/160?img=51",
    "brand_name": "Northwind",
    "background_color": "#FAF7F0",
    "accent_color": "#7C3AED"
}),
});

const { url } = await response.json();
```

### Python

```python
import requests

response = requests.post(
    'https://app.html2img.com/api/v1/templates/quote-card',
    headers={'X-API-Key': 'YOUR_API_KEY'},
    json={'quote': 'The thing that surprised me most was how quickly the team adopted it — by the second week, no one was opening the old tool.', 'attribution_name': 'Marcus Hale', 'attribution_role': 'Head of Engineering, Lattice Co', 'avatar_url': 'https://i.pravatar.cc/160?img=51', 'brand_name': 'Northwind', 'background_color': '#FAF7F0', 'accent_color': '#7C3AED'},
)

url = response.json()['url']
```

## What it is for

### SaaS publishing customer testimonials to social

Account managers collect a quote from a happy buyer, paste it into a workflow, and the system renders a branded card ready for the social calendar. The accent color and brand mark stay consistent across hundreds of testimonials, so the feed reads as one editorial voice rather than a mix of typography choices. Halberd Software ships 12 testimonial cards per month through this pipeline, and each one takes 90 seconds from quote received to scheduled in Buffer.

### News outlets pulling editorial quotes for sharing

Publication editors highlight the strongest line of an interview or feature in a separate share image rather than relying on the article hero. Render the quote with the journalist's name and the publication mark, and the resulting card travels well in a way the full article often does not. Wren Analytics powers this for two regional news sites, who report a 3x increase in click-through compared to plain article shares.

### Podcast highlight sharing key episode lines

Podcast producers pull the most quotable line from each episode and ship it as a card with the host's avatar and the episode number. Listeners tag friends in the comments, and the show finds new subscribers from listeners who would not click on a generic episode-promo card. The format works for interview shows where the guest line lands harder than the host setup.

### Conference speaker quote promotion

Event organizers tease keynote content by sharing one strong line from each speaker in the lead-up to the conference. Render the speaker's line with their headshot and a small event badge, and the cards drive registration when shared by the speakers themselves. The Type Conference uses this template for 28 speakers each year, with each card adding measurable signups during the speaker's repost cycle.

### Internal recognition quotes for company channels

HR and people teams publish quotes from peer recognition Slack channels as styled cards on the company intranet or a town-hall slide. The quote feels weighted and considered when it appears in branded artwork rather than as a chat screenshot, and the practice scales across remote teams that do not see each other in person. Linden & Co recognizes one team member per Friday this way.

## Output

- **Dimensions:** 1200x1200
- **Colour space:** sRGB
- **Transparency:** Not supported
- **Typical file size:** 50 KB to 130 KB
- **Platform specification:** [Square social format (Instagram, LinkedIn, X)](https://help.instagram.com/1631821640426723)

## Common mistakes

### Very long quotes shrink type below readable

A 320-character quote forces the renderer to scale down the type until it fails the 24-pixel mobile readability bar. Trim to under 240 characters or split a long quote across two cards posted as a carousel.

### Attribution wraps to two lines and pushes layout

A long title plus a long company name overflows the attribution slot and shifts the avatar block off-axis. Keep the combined attribution under 60 characters, or shorten the role to a generic descriptor like "CEO" or "Engineering Lead".

### Smart quotes versus straight quotes inconsistency

Source quotes pasted from Slack arrive as straight quotes while quotes from a typeset article use curly. Normalize to one style on your side before posting, since the renderer prints exactly what you send and a mixed grid looks unprofessional.

## Questions

### What is the maximum quote length?

Quotes up to 240 characters render comfortably inside the square layout. Longer quotes downscale the type and may need a different template, or you can split them across a multi-card carousel post. The renderer wraps at word boundaries automatically.

### Can I include a star rating?

Yes, send rating as a number 1 to 5, and the template renders the appropriate star count above the quote. Omit the field for editorial pull-quotes that should not show a rating. The stars use the accent_color so they stay visually unified with the rest of the card.

### How is attribution shown?

The attribution_name renders below the quote, with attribution_role in lighter weight underneath. An optional avatar_url appears as a circular image to the left. If you omit the avatar, the layout reflows so the text fills the freed space.

### Will it handle quotation marks?

Yes, send raw text with or without surrounding quotes. The template wraps the body in styled quote marks regardless. If your quote already contains internal quotes, those render as written and the wrapper marks switch to a different glyph.

### Can I match my brand?

Yes, accent_color and background_color are independent inputs. The accent applies to the quotation marks and stars, while the background sets the card surface. For a fully custom look, also pass logo_url to add your brand mark in the corner.

### What size suits social sharing?

The 1200x1200 square fits Instagram feed and LinkedIn perfectly. For Twitter or X specifically, the dedicated twitter-post template at 1200x675 makes better use of feed space. The square also crops cleanly to a 4:5 portrait if your feed favors that aspect. And when somebody wants the quote on paper, format: "pdf" sets the card on an A4 page ready to print.

## Preview

![Quote Card Image Generator API example render](https://i.html2img.com/image-1777560087586-992538.png)

## Related templates

- [podcast-episode-card](https://html2img.com/templates/podcast-episode-card/)
- [podcast-cover](https://html2img.com/templates/podcast-cover/)
- [email-header](https://html2img.com/templates/email-header/)

## See also

- [Every template](https://html2img.com/templates/)
- [Templates API reference](https://html2img.com/docs/templates/)
- [OpenAPI specification](https://html2img.com/openapi.json)