Layered Story About Block for React

Each layer is a Layer in the component with a label, a depth (0 for the first, then 1, 2 and 3) and any content. To add one, add a Layer with the next depth and a matching entry in INSET and REACH at the top of the file, which hold the classes for how far the layer is set in and how far its rule reaches back to the rails. Past four layers, shrink the step so the last band stays wide enough.

Every layer is a box with a margin that grows by one step: that box draws the side lines and the + marks at its top corners. The rule across the top of the band reaches the rails by the same amount backwards, so each band's top line runs the full width of the page and ends in a T against the box's sides. Nothing is a background, so it follows any theme.

The layers are one description list: each label is a term and its content the description, in the order of the story. The sides, the rules and the + marks are decorative and hidden from assistive technology, so the stepping is a visual aid only.

No, they're example data for a fictional company. Replace the PROOF entries with your own; each is a value and a label, and the value is wrapped so a number with a unit keeps its order in a right-to-left layout.

The header and the layers 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.

Each label moves above its content, and the steps shrink to half a rem so the last layer still has room at 320 pixels. The values and the figures stack one per row. Nothing scrolls sideways.