Principles Rail About Block for React

Edit PRINCIPLES at the top of the file: each entry has a title, a test question, a meaning sentence and a shows list of lines. Keep the test a concrete question a team can answer yes or no to; that is what separates a principle from a slogan. Six fit the rail on one screen and a half, but any number works: the rail's numbers come from the list's order.

The stations are an ordered list, so the numbers are the list's own order and the round nodes are decoration. The hairline between them is drawn per station, so it follows however tall each one is. A node fills while its station is open; that is read from the trigger's expanded state, with no script of its own.

The first station is open on load so the opened look shows at a glance. Opening another closes it, which keeps the rail close to one height and the page from jumping. Each trigger sits inside its own heading, so a screen reader can list the six principles by heading and open any of them with Enter or Space. A closed station's text isn't in the page until it opens.

Only the title and its sentence, with lg:sticky on the header, so they follow the reader down the rail. Below lg nothing is sticky: the header sits above the rail and scrolls away with the page.

The header stacks above the rail, a hairline with a plus mark rules the two parts, and the rail keeps its nodes and its numbers at every width. Titles wrap to two lines rather than truncating, and nothing scrolls sideways at 320 pixels.

The header and the rail fade up once when the page loads, a station's plus turns into a minus, and its node fills, all with CSS transitions. With reduced motion they are off: the change is instant.