Data display
Talent row
A directory row for a person: avatar slot, name, metadata and live sync state.
Anatomy
No interactive example yet. The anatomy for this component lives in the Figma file; the tables below describe it.
Anatomy
Talent row anatomy| # | Part | Description | Presence |
|---|
| 1 | Avatar slot | Photo or initials | Required |
|---|
| 2 | Name and metadata | Two lines | Required |
|---|
| 3 | Sync state | Badge with text | Required |
|---|
| 4 | Action | Trailing menu | Optional |
|---|
Specifications
| Padding | 20px horizontal · 18px vertical |
|---|
| Slots | Profile image or initials · metadata · state |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Row link, then trailing actions |
|---|
| Enter | Opens the profile |
|---|
Pointer and touch| Trigger | Response |
|---|
| Hover | Row tint |
|---|
| Click | Opens the profile |
|---|
Accessibility
role · list item
1.4.1Use of Colour2.5.8Target Size (Minimum)
Requirements| Requirement | How Rig meets it |
|---|
| Structure | li inside ul, with the name as the link text |
|---|
| State | Sync state in words, not only a coloured dot |
|---|
| Target | Row is at least 44px tall |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Make the name the link | ✕Do not make only the avatar clickable |