Avatar list

<div class="avatars">
<!-- Avatar item -->
<div class="avatars__item">
<div class="avatars__image">
<!-- Image -->
...
</div>
</div>
<!-- Repeat other avatars -->
...
</div>
.avatars {
display: flex;
}
.avatars__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
}
.avatars__image {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #fff;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
}
+5

See also

Avatar

Centering

PN

Initial avatar

Presence indicator