Sticky Headline Six Point Features Block for React

Edit PRINCIPLES at the top of the file: each has a title, a description, a check (the name shown in code), the minutes since it ran and an id. The tally counts the entries, so adding a principle changes "of 6" without another edit.

The figure is a Sliding Number: it renders its real value on the server and the first paint, and rolls its digits only when the value changes. It never starts from zero, so a page without scripts still says "6".

It is a small dot in the foreground colour beside the word "passing", so the state is in text and the dot is only decoration. Use a status colour only for a check that fails, which is the one time colour carries meaning here.

From lg the header's content is sticky below the top of the viewport. The cells are taller than the header, so it waits in place while you scroll past the last row. Below lg the header simply comes first.

The header comes first, then the six cells one per row, then from md two across. The lines that overshoot the cells have room because the grid is inset from the rails. Nothing scrolls sideways at 320 pixels.

Yes. The cells use card and foreground tokens, with no fixed colours and no dark scope. The block has no button, so it has no primary colour.