Numbered Changelog Banner Block for React

Edit LATEST for the large release and EARLIER for the list, newest first. Each entry is a version, a line and an href. If you want more or fewer rows, change the array; the numbers are counted from FIRST_NUMBER.

The latest release is number 1, set large on its own, so the list continues the count. The list is an ordered list with start={2}, so the order is exposed to assistive technology, and the visible numbers in the circles are decoration. Change FIRST_NUMBER if you drop the large release.

Each Notes link has an aria-label that names its release ("Release notes for v4.1.3"), so a list of links doesn't read as a row of identical "Notes".

A version string mixes letters, digits and dots. In a right-to-left layout the browser can reorder the dots around the digits, so the version sits in a bdi element and keeps its order in either direction.

That one is a vertical ledger of many entries inside a hero. This is a banner-sized comparison of one big release with a short tail, and it does not carry dates, so it never goes stale.

Below the large breakpoint the latest release sits on top and the list under a rule that runs rail to rail; the divider and its crossing marks only appear beside the list on a wide screen. Nothing scrolls sideways at 320 pixels.