Release Band SLA Compliance Block for React

Edit the three kinds at the top of the file (UPTIME, RESPONSE, REPLY: label, unit, digits, which direction is better, the target) and the readings on each release. A target is met when a "higher is better" actual is at or above it, or a "lower is better" actual is at or below it. The glyph, the "missed by" gap, the breach count in each foot and the number in the title are computed from that, so nothing has to be kept in step by hand. The figures in the block are example data.

A check or a ring is enough to say met or missed, and each has the word as hidden text ("Met:", "Missed:") for screen readers. The destructive dot marks the one real alert, a breached target, and sits beside the words "Missed by 0.04 points", so colour is never the only signal. A release with no breach shows no coloured mark at all.

The list is a grid and every cell spans the same five rows through a subgrid, so the version row, the three metric rows and the foot sit at the same height in every cell even when one cell's text wraps. The cells are separated by hairlines that run the band's full height.

The three cells stack with a hairline between them, each still four rows. The band runs rail to rail and ends the block, so nothing scrolls sideways at 320 pixels and the figures keep their width.

Yes. Every value with a unit or a sign ("99.97%", "182 ms", "14 min") and the version number are isolated so they stay in reading order, and the cells run in the page's direction.

No. It reports what each release delivered against the promise, number by number, rather than describing the commitments. Use a commitments block for the promises themselves and this one for the record.