Client Marks Gallery Block for React

Each client in CLIENTS has a name, letters, project, trade, year, brief, result and a scene. Swap the Mark in the grid cell for your logo (an <img alt="" …> or an inline SVG; the cell's text names the client) and the Scene in the viewer for the project's image, with its description as the alt text and ratio set to its width over its height. The comment above Scene says where.

Six shapes (a circle, a rounded square, a hexagon, a diamond, an arch and a shield) as one path each in a 40 by 40 box, filled or outlined in turn, with the client's letter as text over it. They use your theme's foreground and background, so they are as dark as your text in either theme, and the letter is real text rather than part of the drawing.

One. The block keeps whether it is open and which client it shows, so a mark, Previous client, Next client, an arrow key or a swipe only changes the client. Previous and Next wrap around. The title, the brief and the result follow, the picture fades in (still with reduced motion) and a polite line says "Larkwick Tea, The Evening Blend tin, 1 of 12" for a screen reader.

Tab reaches each mark and Enter or Space opens the viewer. Inside, the arrow keys move to the previous and next client (mirrored in a right-to-left layout), Home and End jump to the first and last, Tab cycles through the close button and the two buttons, and Escape closes. Focus returns to the mark of the client you were looking at, not the one you opened, so step on three clients and close and you land on that mark. DialogContent takes finalFocus, a function that returns that mark.

The marks go three across, four rows, with no scrolling sideways. The viewer fills the screen: the counter and close button at the top, the project as large as it fits, and the title, brief and result with full-width Previous client and Next client buttons at the foot. A horizontal swipe over the picture steps through the clients too.

No. The studio, the clients, the briefs and the figures in the results are invented for the example, so replace them with your own before you publish anything like them.