Net-Zero Ledger Footer Block for React

POWER holds renewable and other generation in the same units, and SHARE is the renewable part rounded to a whole percent. EMITTED and REMOVED are tonnes, and NET is emitted minus removed. The ring, the “94% renewable power” sentence and the three rows all read those values. tonnes groups the digits and uses a minus sign for a negative net. Replace the three inputs and the figure follows. They are the latest annual account, typed into the file, not a live meter.

The ring is a picture of the percentage. It sits in an aria-hidden wrapper, and the percentage is written beside it and again in the list. The range is stroked with the foreground token so the primary colour stays off this block; there is no button here.

It is a plain anchor with href="#", in the figure’s caption. Point it at the account. The arrow mirrors in a right-to-left layout.

From lg the ledger column draws a start border, and a Guides mark sits on that border where it meets the top rule and again where it meets the legal band, so one line runs to the end of the page. Below lg the border goes away and a top rule separates the stacked halves. The footer draws no rule under the legal row.

The block is a footer. The two groups are a nav labelled Footer, each an h2 over a list. The ledger is a figure whose caption is the account line and the report link. “Net-zero ledger” is an h2, and the tonnes are a description list: Emitted, Removed, Net. The policy links are a list named Legal.

It is the current year, read when the footer renders, so it never goes stale. The block is a server component with no state, so on a server-rendered site the year is the server’s when the page was built or rendered.