Illustrated Filing Drawer 404 Error Block for React

No, a block can't: your server sends the status. Render the page from your framework's not-found route so the response is a real 404, not a 200 that says "not found". The link to search and the folders are for people; the status is for crawlers and caches.

Nowhere in this demo: all five are links to #. Point the two buttons and each folder at a real route. The buttons are Shine Button and Button with render set to an a element and nativeButton={false}. The folders are plain a elements in a list inside a named nav.

Edit the FolderLink rows in the drawer: each takes a label. The dashed slot is a separate GoneSlot placed third, where the missing page stood; move it, or drop it if you have no particular page to point at. The grid is four across, so three folders and the slot fill it; for more, widen the grid and shorten the labels, which truncate on a narrow phone.

The folders are real links with their names as text, in a nav called "Penstack folders", and the slot's words are read as text, so nothing important lives only in the picture. The drawer's front, the handle and the tabs are decoration and hidden from assistive technology. Each folder has a visible focus ring, and it lifts on focus as it does on hover.

Only the lift: a folder rises 8 px on hover or focus, and the copy fades up once on load. With reduced motion the folder doesn't move at all (its tint still changes) and nothing fades in.

The copy comes first so the way back is on the first screen, with the two links stacked or side by side as they fit. The drawing follows under them, four across with shorter folders and slightly smaller labels, so the whole page stays about one screen tall.