# 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. Kit part · Free · https://tactileui.dev/parts/avatar - Element: `` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Avatars - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Initials · stamped ```html

AOTR

``` ### Photo · set under the rim ```html

``` ### With a status lamp ```html

``` ### Sizes · 28 · 40 · 56 · 80 ```html

SOSOSOSO

``` ### Stack with a count ```html AO

TRMH

``` ### Square · a team, not a person ```html

TR MH

``` The demo on the page: ```html

Session · Studio A3 in the room

TR MH

JI SO

TRMH

9 people on this reel

``` ## Usage notes Look at the rim: lit on its upper left, shading the field below it. The lamps say who is in. ## Accessibility - The coin is one image: `role="img"` with an `aria-label`. Its initials, photo and lamp are read as that one name, never letter by letter. - Status is in the label as words (“online”, “away”); the lamp is the second signal. - A stack is a `role="group"` whose label lists who is in it and how many more: the “+4” coin is hidden from the reader, because the label says it. - Initials are printed in `--tui-ink-2` on the field: above 6:1 in aluminium and graphite. ## How it’s built No script and no images of its own. The rim is a raised coin (`--tui-raised` under a highlight toward the lamp); the field is a `::before` inset by 7.5% of the size, and an `::after` above everything draws the rim’s shadow on its upper edge and a lit lower lip, over a photo too. Initials are stamped with two text shadows: dark on the cut’s upper wall, light on its lower lip. A photo is layered over the initials, so a broken image with `alt=""` leaves them readable. The lamp gets a bezel of `--tui-face-hi`. In a stack, each coin casts a shadow to the right and the first lies on top. ## Rules The name belongs in the label, not the picture; and a coin you cannot see is still counted in the stack’s name. The full rules are in `avatar.rules.md` in the brain, which ships with the Kit. ## 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. - [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words. - [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.