LinkedIn announcement card

Whoever posts company news needs a card when the news lands. The cadence is ad hoc. Funding, a partnership, a hire, a milestone. The card still has to look like the last one, even when the headline runs long.

This is not a campaign you plan a month out. Someone writes the news. Someone needs the image the same day. The lockup, the pattern, and the type should already be decided. The fields should be the only thing that moves.

The job is one announcement image you can reuse across those four types. Headline, one-line subhead, a tag. You swap the data and export again. You do not redraw the lockup. You do not nudge a text box when the hire announcement is longer than the milestone.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, data swapped, next image.

The component is .lerret/social/linkedin-announcement.jsx. It draws the headline, the one-line subhead, the logo lockup, and a muted background pattern. One component covers funding, partnership, hire, and milestone. The layout is CSS, the way the real site handles text length. A long headline wraps the way the site wraps. A short tag stays a tag.

Data is { headline, subhead, tag } passed via --data. That is the first of the four bulk patterns: re-run export with a different --data file. Same component, new values, new image. There is no batch product, no queue, no orchestrator. --data applies to every artboard in the run and is never written back into .lerret/. The component stays clean. The announcement-specific values stay in the file you pass.

The image is a PNG at 1200×627, matching the shipped linkedin-announcement example.

You use Lerret because one component covers four announcement types with zero redraws. Text length variation is handled by CSS the way the real site handles it, not by a human nudging a text box. A design file would need a new frame every time the headline runs long. A screenshot of the site would pick up chrome you do not want on the post.

npx @lerret/cli@latest export --data

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