Event invitation email image

Marketing runs this per event email. The invite needs an image with the event name, a date block, a location line, and a speaker row. The same facts also have to feed a 1200×630 social card.

This happens once per event email. Speaker lists change. The email image and the social card cannot disagree about the event name, the date, or who is speaking.

The job is an email hero plus a social artboard, both reading the same data. You fill in the event, the date, the location, and the speakers. You export both. When a speaker is added, both images pick it up.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same data, two artboards, two sizes.

The component is .lerret/email/invite.jsx. It draws the event name, a date block, a location line, and a speaker row. A second artboard at 1200×630 reuses the same data for the social version. Two artboards, one set of fields. The email hero is sized for the email. The social artboard is 1200×630. Dimensions are per-asset, so each size gets a layout that suits it.

The data is { event, date, location, speakers: [] }. The speaker row maps over the array. One data file feeds both artboards. The email size and the social size each have their own meta.dimensions, and they read the same facts.

The image is a PNG at email hero size, plus a 1200×630 artboard for the social version.

One set of event facts feeds the email image and the social card, so they cannot disagree. You do not update the email image and forget the social card. The speaker list is an array in one file. Add or drop a name there and both artboards follow.

Pass the event file with { event, date, location, speakers: [] }. One export writes the email hero and the 1200×630 social artboard. Both read the same fields. Add a speaker to the array and both images pick it up. Dimensions stay per-artboard.

npx @lerret/cli@latest export

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