Quote card series from one interview

Content sits down after a podcast or interview and pulls quotes. Six of them, this time. They should look like one series. Adding a seventh should be a file, not a redraw. The typography has to be identical across the set.

This is post-interview work. The quotes are picked. Each card needs the pull quote, the attribution, and a small portrait slot. The set should export together so nobody kerns card three by hand and leaves card four alone.

The job is one square card per quote. One export writes all six. A seventh quote is a seventh data file and the same command. You do not open a design file and duplicate a frame. You do not screenshot a slide six times.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, many artboards, many images. There is no batch product, no queue, no orchestrator.

The component is .lerret/social/quote-card.jsx. It draws the pull quote, the attribution, and the small portrait slot. Six artboards live in .lerret/social/quotes/. Same component, six instances. The portrait slot is on the component. The quote text is in the data. The folder is the series.

Data is one quote per artboard in a colocated .data.json. That is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. Put many artboards in a page or group, each with its own file. One export captures them all. You do not pass --data for this run. Each artboard already has its file. Adding a seventh quote is adding a JSON file next to a seventh artboard in that same folder.

The image is a PNG at 1080×1080, one per quote, in one export.

You use Lerret because you get six cards, one command, and identical typography. Adding a seventh quote is adding a JSON file. A design file with six frames will drift the first time someone kerns one quote by hand. Six screenshots of a slide will not share type, crop, or the portrait slot.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.