Numbered List Team Block for React

Edit PEOPLE at the top of the file: a person is a name, a role and a year. The employee number is the person's place in the array, so list them in the order they joined and the numbers follow ("No. 001" is the first entry). Add or remove rows freely; the "Show all 16" label and the list's count come from the array's length.

A calendar year would be wrong the day it is printed and wrong again every January. "Year 3" counts from the company's first year, so it stays true as long as nobody leaves the list. If you do want dates, replace the year field with an ISO date and format it with Intl.DateTimeFormat in a time element.

Yes: an ol with one li per person and the name in an h3. The number is text, so it is read as "Employee number 001" followed by the name; the visible "No." is hidden from screen readers so the number isn't announced twice. The avatars are decorative and hidden.

Below sm the list shows the first six people and a Show all 16 button under them. The button is a disclosure: it reports whether the list is expanded and which list it controls, and its label never changes. The remaining rows are hidden with CSS, not removed, so they stay in the page's markup and the button doesn't shift anything but the length. The number column stays on every width.

The list's top rule and its + marks come from Guides; each row draws only its bottom border, and the last row draws none, so the next block's top rule is the list's bottom edge and no line is ever doubled. On a phone the Show all band draws the rule under the sixth row instead.

Yes. The columns and the text follow the page direction, the join year is wrapped in a bidi isolate so its digit keeps its place in the sentence, and the employee number is set left to right, because "No. 001" is an identifier and reads the same in every language.