Tenure Mosaic About Block for React

The people are PEOPLE. Large tiles come first and have wide set; everyone else is a small tile. Each person has a first name, a last name, a role, a since such as 4 for "Year 4", and a fact. The header counts the large tiles and the small ones from that list. Keep both large tiles at the start: on four columns they sit side by side, and on two columns each one fills the row.

The heading is the section's only h2. Every person is an h3. On a large tile the role, the year and the fact are text in the cell. On a small tile the name is a button described by the fact, and the fact is in the cell as well as in the card. The initials avatar is decorative, because the name is written beside it. The lines are drawn by a layer hidden from assistive technology.

On a small tile the card opens on hover and on keyboard focus. On a touch screen, where a card cannot be relied on, the fact is shown in the cell. A long-press may also open the card, but the block does not depend on it. Nothing is only in the card: the large tiles show the fact outright, and the small tiles keep it in the cell.

Tenure. The founder and the first hire, the earliest since values, are the 2 by 2 tiles. Later teammates are 1 by 1. The size is the wide flag on the person, not a measurement the browser makes.

Two columns. Each large tile spans the row and is two rows tall, then the small tiles pair up. From lg it is four columns: the two large tiles side by side, then two rows of small tiles. There is no three-column step, which would leave a hole. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the tiles follow the reading direction.

The header fades up once on load. With reduced motion it simply appears. The block has no autoplay and does not move a tile on its own. The file has no state of its own; the card is the only interactive part.