Values Examples Team Block for React

Edit VALUES at the top of the file. A value is an id, a short label, a means sentence and a list of examples, each a name, a role, a did sentence and a when such as "Year 3". The counts in the rail and the "12 things" in the header are counted from that list.

Only the examples: each one fades up, the second a moment after the first and the third after that, whenever its page comes into view (on load and each time you pick another value). It is a CSS transition on opacity and position, not a script. With reduced motion the transition is switched off and the examples show at once. To remove the effect, delete the REVEAL classes from the list items.

It is a vertical tab list: Tab moves into it and the Up and Down arrow keys move between values. On a phone the rail is drawn as a row of chips but is still a vertical list, so Up and Down move between chips there too. Left and Right do nothing in a vertical list. The page is reachable with Tab after the rail.

No. Each page is laid out invisibly, all four in the same cell, behind the visible one, so the block is always as tall as the longest page at the current width, on every screen size. The invisible copies are hidden from assistive technology and from the keyboard.

A calendar year goes stale; "Year 3" is the third year of the company and stays true. Use whatever your team says out loud. Keep it text, not a time element, since there is no date to machine-read.

The rail becomes a row of chips that scrolls sideways above the page, each showing just the value's name (the count of examples is dropped). The page is one column under it, and a rule with + marks takes the divider's place. Nothing but the chips scrolls sideways at 320 pixels.