Glossary term cards

A tech writer makes these alongside a glossary page. Each term needs a card: the term, a short definition, a category chip. The glossary source of truth is a set of small files. The images are a derived artifact of those files. Social can reuse the 1080×1080 PNGs. The page can keep the HTML.

This happens alongside the page, and again when a definition is edited. The person doing it already owns the terms. They should not keep a second copy of each definition in a design file.

The job is one PNG per term, all in one group folder. You keep one term-card component and one artboard per term. Each artboard has colocated data. One export writes the set. Adding a term is adding a file. Re-exporting after a definition edit updates the image that came from it.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same card, colocated data, many images.

The component is .lerret/docs/term-card.jsx. It draws the term, the short definition, and the category chip. Those three things are the card. The category chip is a field, so a term cannot sit in the wrong category unless the file says so.

Data is one artboard per term with colocated data, all in one group folder. This is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures them all. The files are the glossary. The PNGs are what you get from the files. There is no batch product, no queue, no orchestrator.

The images are PNGs at 1080×1080, for social reuse. Term, short definition, and category chip are the three fields. All the artboards sit in one group folder, so one export writes the set.

The glossary source of truth is a set of small files. The images are a derived artifact of them. A design-file card per term will keep an old definition until someone opens that frame. You use Lerret because the card is the file, and the file is the glossary.

The images are PNGs at 1080×1080 for social reuse. The glossary source of truth is a set of small files. The images are a derived artifact of them.

npx @lerret/cli@latest export

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