# Roll Call

A team section on a machined roll board beside a light box: a row per person with a staff number, name, role, the year they started and a lamp. Call a row up and the person is set in the light box’s halftone screen, a dot at a time in a wipe across the glass, with their nameplate under it.

Block · With a Pass · https://tactileui.dev/blocks/roll-call

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Roll board tablist, Halftone light box, Dot wipe between portraits, Photo to halftone, Drawn profile silhouettes, Drawer on phone, Open role row, Depth tokens for volumes, Finish following

## Usage notes

The people behind a product, on its about or team page. The board is a tablist of rows; pointing at one, focusing it or tapping it calls that person up: their lamp lights and the light box re-sets its screen to their portrait, as a halftone in warm light, with their name, role, one line and their links under the glass. A person’s photo (same origin or served with CORS) is set as a halftone; without one, a profile silhouette is drawn from a few numbers (brow, nose, lips, chin, hair, glasses, beard), so the sample team are silhouettes, never invented faces. An optional last row says a role is open, its amber lamp lit; called up, the glass shows an empty dotted outline and the plate the one contrast key. On a phone the light box opens under its row like a drawer.

## Options

| Option | Type | Description |
| - | - | - |
| label | text | Printed small above the heading. Empty leaves it out. |
| title | text | Heading |
| org | text | Engraved on the board’s plate. Empty leaves it out. |
| lead | text | Sentence |
| count | number | 2 to 12 rows on the board. |
| first | enum | The person in the light box when the section opens (one of the people shown). |
| hiring | boolean | A last row for a role you are hiring for, its amber lamp lit; called up, an empty outline and the one contrast key. |
| hiringRole | text | Open role |
| hiringHref | text | Open role link |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. The light box is dark glass in every finish. |
| volume | enum | Auto follows the nearest data-volume on the page. Quiet draws hairlines where Tactile draws depth. |

## Methods

- update
- destroy

## States

1. **At rest**: The head; the board with its engraved plate, column heads and nine rows (eight people and the open role); the first person called up, their row standing proud with its green lamp lit, the light box beside with their silhouette set in dots. Nothing runs.
2. **Called up**: A click, a resting mouse, a tap or an arrow key in the board calls a row up.
3. **Portraits**: A photo is fitted to the glass, greyed, stretched to use the whole screen and set as a halftone; without one, a profile silhouette facing the board, cut in black and laid on the lit glass.
4. **Open role**: A last row, “We are hiring”, its amber lamp always lit; called up, the glass is dark with a dotted outline and the plate says the role with the section’s one contrast key, “See the role”.
5. **Narrower**: 
6. **Phone**: 
7. **Reduced motion**: The screen changes at once; nothing transitions.
8. **Finishes and volumes**: On a page with the kit’s finish tokens the board is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system. Every shadow reads a kit depth token, so the Quiet volume draws hairlines; the light box stays dark glass.

## How it works

Original composition. Tallyroll, its team, their lines and links are sample copy, invented, and the preview says so. The portraits are profile silhouettes drawn on a canvas from a few numbers, never photographs or invented faces; a real team brings its own photos. The board, light box and keys are CSS drawn here, in the kit’s tokens.