Renewal Delta Callout Stats Block for React

Edit BEFORE and AFTER at the top of the file, the renewal counts for the month before and this month. The difference, the percent and both tiles are read from those two numbers. The percent is the difference as a share of the month before, rounded to one decimal.

The change is the point of the block, so it is set in display type and the two periods are the evidence under it. The tiles stay a pair: they don't sit beside the percent, and on a phone the percent is still the first thing in the figure.

A rise in renewals is good news; a rise in churn would not be. The block shows the direction with an arrow and a plus sign, in the text colour, and leaves the judgement to the reader. That stays correct in every theme preset.

Yes. The percent is text, with the arrow hidden from assistive technology because the plus sign says the same. The two tiles are a description list: the period badge is the term and the count is its description, with "renewals" available to a screen reader. Signed figures are kept left to right. The percent and this month's count roll visually; a screen reader hears the final numbers immediately.

The tiles end the block. On a page, the next section draws its own top rule along their foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule comes from the Guides component. If nothing follows the block, add a bottom border to the list's wrapper.

The change stays first, at a slightly smaller display size, and the two tiles stay side by side under it. Nothing scrolls sideways at 320 pixels. The header and the change fade up once when the page loads, and the percent rolls once it scrolls into view. With reduced motion the fade is off and the digits change in place. The tiles themselves don't animate.