Overlapping avatars for the people on a project or a thread, and a count of the rest.
- and 3 more
Options
The avatar group has no choices: it is drawn one way.
Examples
Usage
Eight people on a task: three faces and a count of the other five.
- and 5 more
Three to five faces
Draw three, four or five faces; the count says how many are left.
- and 5 more
- and 4 more
- and 3 more
Everyone shown
With no one left over, there is no count.
With pictures
Pictures and initials mix; the count can include people the page has not loaded.
- and 9 more
Guidelines
Purpose
Shows the people on a project, a task or a thread in little room: a few overlapping avatars and a count of the rest, such as "+3". It says who is involved at a glance; the full list lives elsewhere.
When to use
- On a card, a row or a header, to show who works on something or who took part.
- Where three to five faces are enough and the names are one step away.
When not to use
- For one person. Use an avatar with name.
- When the reader needs every name. List the people instead.
- As a button. The group takes no action; a page that opens the full list puts a separate button or link beside it.
Usage rules
Do
- Show three to five faces, and count the rest.
- Name the group by what the people do there, with how many they are.
Don't
- Squeeze in more faces than fit; they stop being faces.
- Rely on the faces alone: give the full list one step away.
- and 4 more
Show a few faces and count the rest.
Eight squeezed faces stop being faces.
Anatomy
- The block, a list of people in a row as wide as its content.
- The item part, one person: the avatar component at its extra small size, in a ring of the page's surface color that keeps it apart from the face it overlaps. Each face sits over the one before it.
- The more part (optional), the count of the people not drawn, as a small gray pill in the same ring.
Behavior
The group draws the first people it is given, three by default, then the count of the rest. With no one left over, there is no count. A picture that fails to load gives way to that person's initials, as the avatar's does. Nothing moves and nothing takes focus.
Accessibility
What it does for you
- The group is a list named by how many people it holds, "8 people" by default, or by a name the page gives, such as "Assigned to 8 people".
- Each avatar is named by the person's name. The count is read as words, "and 3 more", not "+3".
- In high contrast mode the rings take the page's background color and the count an edge in the text color.
What you must do
- Give the group a name that says who the people are when "8 people" is not enough, such as "Assigned to 8 people".
- Give the words the group says by itself, such as the count of the rest read aloud, in the page's own language. They keep their English unless the page gives its own.
- Put a separate button or link beside the group when a page opens the full list. The group itself takes no action.
How to test
- With a screen reader, the group is read as a list with its name, each person by name, then the count of the rest as "and 3 more".
- Tab past it: the group takes no focus.
- In a forced-color mode, the rings and the count stay visible.
- With text at 200% and the page 320 pixels wide, the count stays whole beside the avatars.
Source
The files the avatar group is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-avatar-group — Avatar group. Figma "Avatar group" 7580:1856 (Count: 3, 4, 5; More text; Show more).
* Extra small avatars in a row, each in a ring of the default surface (the
* 2 step around it), overlapping the one before by 6, then a count of the
* rest: a solid pill, the sunken shade over the default surface, in Label SM
* and the subtle text color, in the same ring. Each later face sits over the one before. The overlap is
* written from the start edge, so it mirrors in right-to-left text. The
* avatars keep their own classes; this stylesheet adds the ring, the overlap
* and the count. */
.smbk-avatar-group {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin: 0;
padding: 0;
list-style: none;
}
/* The block frames the words it hides for screen readers, so they stay inside it wherever it is placed: without a
frame they hang from the page itself and stretch it, past the end of an area that scrolls. No weight, so a parent
that places the block keeps its say. */
:where(.smbk-avatar-group) {
position: relative;
}
.smbk-avatar-group__item {
display: inline-flex;
padding: var(--smbk-space-2);
border-radius: var(--smbk-radius-full);
background: var(--smbk-color-surface-default);
}
.smbk-avatar-group > :not(:first-child) {
margin-inline-start: calc(-1 * var(--smbk-space-6));
}
/* The count: as tall as an avatar inside the same ring, so the row's faces and the count line up. Solid: the
see-through sunken shade over the ring's own surface, so the face it overlaps never shows through it. */
.smbk-avatar-group__more {
box-sizing: content-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--smbk-size-24);
height: var(--smbk-size-24);
padding-inline: var(--smbk-space-6);
border: var(--smbk-border-width-emphasis) solid var(--smbk-color-surface-default);
border-radius: var(--smbk-radius-full);
background: linear-gradient(var(--smbk-color-surface-sunken), var(--smbk-color-surface-sunken)), var(--smbk-color-surface-default);
background-clip: padding-box;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Words for screen readers only: "and 3 more" behind the visible "+3". */
/* .smbk-avatar-group__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
/* The ring is a fill and would vanish, leaving the faces running into each other; it takes the
palette's background, and the count its text color as an edge. */
.smbk-avatar-group__item {
forced-color-adjust: none;
background: Canvas;
}
.smbk-avatar-group__more {
border-color: CanvasText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.2--smbk-space-2 | 2px | Spacing | |
| radius.full--smbk-radius-full | 9999px | Radius | |
| color.surface.default--smbk-color-surface-default | light: #f3f5f8dark: #181a1cchanges with theme | Color | |
| space.6--smbk-space-6 | 6px | Spacing | |
| size.24--smbk-size-24 | 24px | Size | |
| border-width.emphasis--smbk-border-width-emphasis | 2px | Border width | |
| color.surface.sunken--smbk-color-surface-sunken | light: #373d430ddark: #00000066changes with theme | Color | |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
Manifest
{
"name": "avatar-group",
"block": "smbk-avatar-group",
"summary": "Overlapping avatars for the people on a project or a thread, and a count of the rest.",
"adapt": "css",
"axes": {},
"flags": {},
"parts": [
"item",
"more",
"hidden"
],
"figmaNodeId": "7580:1856"
}