Counters Row About Block for React

The four counters are COUNTERS at the top of the file: each has a label, a value, optional decimals, grouping and suffix, the change written with its sign, and down for an arrow that points down. The "Updated" line in the header is plain text; it says "2 hours ago" rather than a time, so it never shows a stale date. All the figures are example data: replace the arrays at the top of the file with your own.

Each figure is a SlidingNumber with trigger="view": it holds its final width in zeros until the block scrolls into view, then rolls up once. With reduced motion the digits still arrive at their final values, without the roll, and the screen-reader text is always the final number.

They show the direction of the change, nothing else: a down arrow beside "time to spot an outage" is an improvement, and the block doesn't colour it green or red. The sign is written out too (a true minus sign, so a screen reader says "minus"), and the comparison "vs last month" is text.

The band is a description list: the label is the term and the figure and the change are its two descriptions. The figures are written in full for assistive technology, so "12,480" is read as a number even while it rolls.

Two by two. The cells share their rows, so a label that wraps to two lines moves the change line down in both cells of its row and they stay aligned. The comparison drops to its own line under the arrow.

The block ends on the band and draws only a top rule. The next block's top rule is its foot, so the two never double up.