Metric Tile Row Stats Block for React

Edit MARCH and FEBRUARY at the top of the file. Rent collected, rent due, occupancy and renewals come from MARCH; FEBRUARY holds the month before. Arrears is worked out as rent due less rent collected, the collection rate in the headline is collected over due, and every change is computed from the two months, so nothing is typed twice. Month names are plain text with no year, so the copy never goes stale.

The block is about one figure that leads and three that support it, so the hero cell is lg:col-span-2 of a five-column grid, on a solid tint, and its number is far larger than the others. If you want a different split, change the grid's column count and the hero's span together; the three small cells always take whatever is left.

Whether a change is good depends on the figure: arrears going down is good news, occupancy going down isn't. Each change is an arrow and a sign in the text colour, and the reader judges it. That also keeps the block correct in every theme and readable without colour.

Yes. The figures are one description list: each label is a term, and its value, change and comparison are its descriptions, so a screen reader hears the label before the value. The arrows are hidden from assistive technology because the sign says the same, and the minus is a true minus sign. Values sit in bdi elements and signed changes stay left to right, so a right-to-left page keeps them in order.

The header and the band fade up once on load and the numbers roll up when they scroll into view; with reduced motion everything simply appears with its final value. On a phone the small cells drop the repeated "vs February" (the header says it once, and screen readers still hear it), so three figures fit side by side at 320 pixels without scrolling sideways.

The band ends the block, so the next section's top rule is its foot. A bottom border here would double that rule, and the column has no bottom padding for the same reason.