Prototypes / Avatar

Single avatar

Default

<j-avatar></j-avatar>

Text

<j-avatar>JK</j-avatar>

Image

<j-avatar>
  <img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4">
</j-avatar>

Custom icon

<j-avatar>
  <icon search></icon>
</j-avatar>

Avatar group

A group of avatars. The overflow menu component is used to collapse overflowing avatars into a menu.

<j-avatar-group>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
</j-avatar-group>

Customization

The avatar overlap, gap, roundness, size, background, and max number of items shown can be customized using CSS.

<style>
  j-avatar-group.styled {
    --avatar-group-overlap: 10px;
    --avatar-group-gap: 4px;
    --avatar-border-radius: 6px;
    --avatar-size: 30px;
    --avatar-group-max-items: 5;
    --avatar-background-color: var(--background);
    --avatar-color: var(--color-accent);
    --avatar-border-color: currentColor;
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-xs);
  }
</style>

<j-avatar-group class="styled">
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
</j-avatar-group>

Performance test

<j-avatar-group id="perfo-test"></j-avatar-group>

<script>
const group = document.querySelector('#perfo-test');
for (let i = 0; i < 200; i++) {
  const avatar = document.createElement('j-avatar');
  avatar.textContent = 'FL';
  group.appendChild(avatar);
}
</script>