Magazine Cover Split Features Block for React

Edit CHANGES at the top of the file: each entry has a title, a summary and isNew, which is true for a new feature (a filled badge) and false for an improvement (an outlined one). The numbers are made from the position in the list, and the "6 changes" count from its length, so adding a row needs no other edit.

Decoration. The cover repeats the release's name in a drawing, so it is hidden from screen readers and has nothing focusable inside. The real content is the heading, the list and the link, all in the order a screen reader reads them. Change the cover's words in the Cover and Collage components.

It's an ordered list named "What's inside Issuelane 4", each row with a heading for the change and a sentence under it. The visible numbers and the label above the list are decorative, because the list already announces its position and its name.

The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. The split divider and each row's rule come from Guides too, which puts a + mark where a rule meets a rail or the divider. The cover has its own frame with + marks on the corners.

The header fades up once when the page loads, with a CSS transition, and the link's arrow nudges on hover. With reduced motion both are off and the section simply appears.

The cover comes first at about 18 rem tall, rather than filling a column, then the list. The numerals, rows and badges keep their sizes, and a row's sentence wraps. Nothing scrolls sideways at 320 pixels, and the divider is a hairline between the cover and the list instead of a vertical line.