Alternating Stripe Sections Features Block for React

Edit RUNS, ENVIRONMENTS and FIGURES at the top of the file. A run's state is one of passed, running, queued or failed and picks its dot and its label; an environment's ok flag picks a filled dot or a ring. The figures are plain strings, written in a bdi element so units keep their order in right-to-left layouts.

State is carried by words and by the shape of the dot (filled, ring, destructive), never by colour alone, and the status colours stay rare so a failure is easy to spot. Passed runs use the foreground dot, queued and running runs a ring, and the one failed run uses the destructive status token.

The tint is on each stripe, inside the page column, and the column itself has no background, so the rails and the top rule stay clean. Each stripe's rule comes from Guides rather than a border, so the + marks land on the line. Pass tinted to a stripe to tint it.

No. The runs list and the environments table are pictures of the product, hidden from assistive technology and inert, so nothing in them takes focus. The heading and sentence beside each say what it shows, and the link under it is the only control.

The header fades up once on load and the link arrows slide on hover. Nothing else moves. With reduced motion the transitions are off and the section simply appears.

Each stripe stacks with its text first. The runs list and the environments table show three rows, and the table drops its deploy-time column, so nothing scrolls sideways at 320 pixels. The three figures stack one per row.