Holistics Design System

Avatar Group ​

Stable

Display a group of avatar images, often representing users.

vue
<script setup lang="ts">
import { HAvatarGroup } from '@holistics/design-system'
</script>

<template>
  <HAvatarGroup
    size="xl"
    :avatars="[
      { image: 'https://avatars.slack-edge.com/2023-12-12/6334464122773_2329a6293a6184549150_72.png' },
      { name: 'Design System' },
      { initials: 'H' }
    ]"
  />
</template>

Examples ​

Sizes ​

vue
<script setup lang="ts">
import { AVATAR_SIZES, HAvatarGroup } from '@holistics/design-system'
</script>

<template>
  <div class="space-y-2">
    <HAvatarGroup
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
      :avatars="[
        { image: 'https://avatars.slack-edge.com/2023-12-12/6334464122773_2329a6293a6184549150_72.png' },
        { name: 'Design System' },
        { initials: 'H' }
      ]"
    />
  </div>
</template>

When exceed max visible avatars ​

vue
<script setup lang="ts">
import { HAvatarGroup } from '@holistics/design-system'
</script>

<template>
  <HAvatarGroup
    size="xl"
    :avatars="[
      { image: 'https://avatars.slack-edge.com/2023-12-12/6334464122773_2329a6293a6184549150_72.png' },
      { name: 'Design System' },
      { image: 'https://i.pravatar.cc/150?img=11' },
      { image: 'https://i.pravatar.cc/150?img=47' },
      { initials: 'H' },
      { image: 'https://i.pravatar.cc/150?img=68' },
    ]"
  />
</template>

API ​

Pass-through: <div> ​

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props ​

NameTypeDescription
avatars *
AvatarInfo[]
size *
"sm" | "md" | "lg" | "xl"