Contact Grid Team Block for React

Edit MEMBERS and DOMAIN at the top of the file. A person is a name, a role, a presence and the handle before the @; the address is the handle at DOMAIN (the reserved .example domain here, so nothing real is shown). The initials come from the name and the avatar's tone from the person's place in the list. Six people fill two rows of three at lg and three rows of two below it.

It writes the address to the clipboard, swaps its copy icon for a check for three seconds and tells assistive technology "Email copied" in a polite status inside the button. If the browser refuses (a page not served over HTTPS, or no permission) it shows a cross and says "Couldn't copy". Every button has a name that includes the person ("Copy email for Tomas Lindqvist"), so six of them are not six identical stops.

The dot is green for available, amber for in a meeting and grey for away, with the same words beside it, so colour is never the only signal. It is example data in the file: connect presence to your own source (a status API, a rota) to make it live. These are the only colours in the block besides the theme's greys, and they are used only because presence is a real status.

Below sm the grid keeps two columns, so a half-width cell has no room for a long address: the address is not shown there, but the Copy email button still copies it. From sm the address is shown, written left to right inside the cell even in a right-to-left page. Nothing scrolls sideways at 320 pixels.

Each cell is a relative box with its own Guides: four sides, a little overshoot past each corner and a + on the start corner. The overshoot needs room, so the cells sit 24 pixels apart (32 from lg) and inset from the page's rails. The top rule and the rails come from the spine, and the block keeps its bottom padding because nothing runs rail to rail at its end.

The header and the grid fade up once when the page loads, and the button's icon cross-fades to the check. With reduced motion the entrance is off and the icon changes without scaling.