# ID plate A staff badge for a person. An engraved metal plate with a clip slot cut through its top edge, a photo well and the name, role and serial engraved beneath. With no photo, the initials are debossed into the well. A lamp shows whether they are online, away or offline, and the word is always printed beside it. A compact plate does the same in one line, for lists. Kit part · With the Kit · https://tactileui.dev/parts/id-plate > The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing ## Anatomy One plate, drawn like the kit’s panel: a face with the bead-blast on it and a raised edge. The clip slot is a stadium cut through the top, the same recess as a field. The photo well is a recess a photograph is set into, and a rim over it shades its upper edge the way the avatar’s does, so a print looks set in, not stuck on. With no photo the initials are debossed: the letters are a shade darker than the well, the lamp catches the lower lip of every stroke and the upper wall is in shadow. Name, role and serial are engraved, which here means a light line under each letter. Corners are concentric. The compact plate is the same markup laid out again by its modifier: the foot dissolves into the row and the serial moves up under the role. ## Variants - Online · a photo - Away · initials - Offline · a photo - Long name and role wrap - Compact · online - Compact · a long name is cut short ## States - Online - Away - Offline ## Props and options | Name | Kind | Description | | - | - | - | | p.__role | element | The name, a real heading, and the role under it. The heading level is yours. | ## Usage notes Pure markup: nothing here runs. The lamp and its word are two ways of saying the same thing. ## Accessibility - The plate is labelled by the person’s name, a real heading, so a screen reader says who it is before anything else. Role and serial are text, not pictures. - Presence is said in words, in the page, every time: “Online”, “Away”, “Offline”, in the reading order after the role and serial. The lamp is aria-hidden because the word is right beside it, and it is also lit or dark, not just green or amber, so it is not colour alone. - The photo has empty alt text, because the name is next to it and repeating it would only make a screen reader say it twice. The initials are hidden from assistive technology for the same reason. - In the compact plate the serial’s label is hidden visually but kept for a screen reader, so it still says “Serial” before the number. - A long name wraps in the full plate and is cut short in the compact one, where it stays a real heading so the whole name is still read. - There is nothing to press, so there is nothing for reduced motion to change. ## Related parts - [Profile card](https://tactileui.dev/parts/profile-card): A person’s ID plate: their coin set in a countersunk socket, name and role, a rating plate of facts engraved in tabular figures, and one key to act. Compact for one line. - [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count. - [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.