Team roster / org introduction cards

People ops does this on new hires. A welcome post needs a card: name, role, team, start date, a photo slot. Every welcome should look like every other welcome. That’s the point.

This is hire-day work. The hire changes. The card shouldn’t. You want the next welcome to take about a minute because the component already exists and the fields are the hire’s facts. You’re not restyling a welcome every time someone starts.

The job is one data file per hire and one export. Fill the fields, run the command, use the PNG. The next hire is a new file and the same component.

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

The component is .lerret/ops/new-hire.jsx. It shows the name, role, team, start date, and a photo slot. Those are the slots. The photo is a slot the component already has. Name, role, team, and start date are fields on the same artboard.

Data is one data file per hire. Re-run export with that file via --data. Same component, new hire, new image. The file is reviewable as text, so a wrong start date is a one-line fix. This case is written as one file per hire, which is bulk pattern 1: re-run export with a different --data file.

The image is a PNG 1200×630. That’s the card size. One image per hire.

You use Lerret because every welcome post looks like every other welcome post, which is the point, and it takes about a minute. Consistency is the component. The hire is the data. A design file you duplicate and forget to update, or a screenshot of an internal profile, will not stay consistent across hires.

Name, role, team, and start date all live on that one file. The photo slot is empty until you fill it. The next hire does not get a new artboard unless you choose to add one. The case as written is one file, one run.

npx @lerret/cli@latest export --data

Pass one hire file per run. Start a project with npx create-lerret@latest. More in the use cases index.