Founding Artefacts About Block for React

The captions and the wide-screen spans are ARTEFACTS at the top of the file. Each has an id, a title, a caption and a wide class. The drawing for an id lives in ArtefactDrawing. The heading's count is the length of the array. To use a photograph, replace that id's svg with an img and keep the figure and the caption.

On a wide screen the grid is six columns: the invoice spans three columns and two rows, the whiteboard and the notes span three each beside it, and the logo, the dashboard and the receipt span two each on the last row. On a phone there is no span, so six cells fill three rows of two. A short row would show the border colour through the gap, which is why the spans add up.

The heading is the section's only h2. The cells are a list named with the count. Each cell is a figure: the drawing is hidden as decoration, and the caption's title is an h3 with the sentence under it, so the story does not depend on the picture. The lines are drawn by a layer hidden from assistive technology.

The grid is two columns from the narrowest width. Drawings keep a short fixed height, and the invoice grows to fill its two rows only from lg. Captions wrap. Nothing scrolls sideways at 320 pixels.

The block ships without image files, and a grey box with an image icon reads as unfinished. Each drawing is the object it captions: an invoice, a board, notes, a sketch, a dashboard, a receipt. The comment above ArtefactDrawing is where a project swaps in photographs.

The heading and the grid fade up once on load. With reduced motion they simply appear. The block has no state and no script, so it can render on the server, and nothing loops.