Skip to the page
TACTILE UI

Kit part · Avatars

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.

Element
<span role="img">
Needs
kit.css
Rules
avatar.rules.md · 5
Finishes
Aluminium · Graphite · Porcelain · Black
Volumes
Tactile · Quiet
On this page
  1. Variants
  2. Every state, at once
  3. API
  4. Markup
  5. Accessibility
  6. How it’s built
  7. Rules
  8. Related parts
01

Variants

AOTR
Initials · stamped
MHJI
Photo · set under the rim
AOTR
With a status lamp
SOSOSOSO
Sizes · 28 · 40 · 56 · 80
AOTRMH
Stack with a count
SA
Square · a team, not a person
02

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

PartInitialsPhotoOnlineAwayBusyOffline
40pxAOAOAOAOAOAO
56pxTRTRTRTRTRTR

Graphite

PartInitialsPhotoOnlineAwayBusyOffline
40pxAOAOAOAOAOAO
56pxTRTRTRTRTRTR
03

API

NameKindValuesWhat it does
.tui-avatarclasson <span role="img">The coin: a raised rim and a struck field, 40px.
aria-labelattributerequiredThe person’s name, then the status if a lamp shows one: “Ada Okafor, online”.
.tui-avatar__markclass1–2 letters · an SVGStamped initials, or a person glyph for a guest. Always present, under any photo.
imgelementalt=""A photo set under the rim. Empty alt: the coin’s label already names the person. If it fails to load, the initials show.
.tui-lampelementgreen · amber · red · unlitA status lamp mounted in the rim at five o’clock.
.tui-avatar--sm · --lg · --xlclass28px · 56px · 80pxSizes. Initials, rim and lamp scale with the coin.
--sizeCSS property40pxAny other size. The field, the type and the lamp follow it.
.tui-avatar--squareclass—A squared coin for a team, a studio or a company.
.tui-avatar-groupclassrole="group" + aria-labelA stack. Coins overlap from the left; each casts its shadow on the next.
.tui-avatar-group--sm · --lgclass28px · 56pxEvery coin in the stack at one size.
.tui-avatar--moreclassaria-hidden="true"The count at the end of a stack: “+4”. The group’s label already says it.
04

Markup

<!-- One person: initials under the photo, status in the label. -->
<span class="tui-avatar" role="img" aria-label="Ada Okafor, online">
  <span class="tui-avatar__mark">AO</span>
  <img src="ada.jpg" alt="">
  <span class="tui-lamp" data-on></span>
</span>

<!-- A stack of people with a count. -->
<span class="tui-avatar-group" role="group" aria-label="7 people: Ada Okafor, Tom Reyes, Mira Hale and 4 more">
  <span class="tui-avatar" role="img" aria-label="Ada Okafor"><span class="tui-avatar__mark">AO</span><img src="ada.jpg" alt=""></span>
  <span class="tui-avatar" role="img" aria-label="Tom Reyes"><span class="tui-avatar__mark">TR</span></span>
  <span class="tui-avatar" role="img" aria-label="Mira Hale"><span class="tui-avatar__mark">MH</span><img src="mira.jpg" alt=""></span>
  <span class="tui-avatar tui-avatar--more" aria-hidden="true"><span class="tui-avatar__mark">+4</span></span>
</span>

Needs kit.css only, no script. How to install the kit.

05

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 both finishes.
06

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.

07

Rules

avatar.rules.mdIn the brain

The name belongs in the label, not the picture; and a coin you cannot see is still counted in the stack’s name.

5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder PassHow agents use the brain
08
AOAda OkaforSound engineer
Sessions
128
Rating
4.9

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

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.

  1. IntroPiano, room mics1:12
  2. LodeFull band4:05
  3. Night reelVocal and tape3:42

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.

Docs
Finish
Volume