Status Tile Grid Stats Block for React

Edit SERVICES at the top of the file. A service is a name, a latency in milliseconds and a state (operational, degraded or incident). A healthy one adds quiet, its days without an incident; an exception adds a cause and since, the minutes it has lasted. The header's count, the dots, the rings and every line are computed from the list, so add or remove services and keep the grid's rows in mind: it's three across from lg, so a multiple of three looks best.

A board where every tile is green stops meaning anything. Here the normal state is the quiet foreground tone, and the warning and destructive status colours appear only on the tiles that need attention, so the eye goes straight to them. The rings are in the foreground tone, never a coloured border, so the tiles still read in every theme preset and without colour: the state is also written as a word.

Yes. The state is always a word ("Operational", "Degraded", "Incident") next to the dot, and the dot itself is hidden from assistive technology because the word says it. Each tile is a list item with a heading for the service. The latency and the line under it are plain text in reading order: name, state, latency, note.

Each tile spans four rows of the list's grid and lays its parts on them (a CSS subgrid), so when one cause wraps to three lines, the notes of the other tiles in that row stay at the same height and the hairlines between rows stay straight. It works at every width, including two across on a phone.

No. The block shows the readings it is given and has no timers: wire SERVICES to your status API and render the block again when it changes. The copy says the tiles read the last five minutes, which is the window your API should report.

The band ends the block. The next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The top rule comes from the Guides component, with a + mark where it meets each rail.