AvatarGroup

This is used for avatars where is possible to show only a limited count of avatars at one line. It's possible to use greater avatars, but it's not possible to have the same count of avatars.

Examples

examples

import { AvatarGroup } from "@seduo/design-system";
...
const Avatars = [
{src: 'https://i.pravatar.cc/64?img=1', alt: 'Lector AD', href: "#"},
{src: 'https://i.pravatar.cc/64?img=2', alt: 'Lector BC'},
{src: 'https://i.pravatar.cc/64?img=3', alt: 'Lector CD'},
{src: 'https://i.pravatar.cc/64?img=4', alt: 'Lector DE'},
{placeholderText: 'AB', alt: 'Lector EF'},
];
...
<AvatarGroup avatars={Avatars} size="small" description="+1" />
...
<AvatarGroup avatars={Avatars} description="+2" />
<AvatarGroup avatars={Avatars} />
...
<AvatarGroup avatars={Avatars} size="large" description="+7 lectors" descriptionHref="#" />

{% set Avatars = [
{src: 'https://i.pravatar.cc/64?img=1', alt: 'Lector AD', href: "#"},
{src: 'https://i.pravatar.cc/64?img=2', alt: 'Lector BC'},
{src: 'https://i.pravatar.cc/64?img=3', alt: 'Lector CD'},
{src: 'https://i.pravatar.cc/64?img=4', alt: 'Lector DE'},
{placeholderText: 'AB', alt: 'Lector EF'},
] %}
...
{% embed "@seduo-design-system/avatarGroup.twig" with { props: {
    avatars: Avatars,
    size: 'small',
    description: "+1"
}} %}{% endembed %}
...
{% embed "@seduo-design-system/avatarGroup.twig" with { props: {
    avatars: Avatars,
    description: "+2"
}} %}{% endembed %}
{% embed "@seduo-design-system/avatarGroup.twig" with { props: {
    avatars: Avatars,
}} %}{% endembed %}
...
{% embed "@seduo-design-system/avatarGroup.twig" with { props: {
    avatars: Avatars,
    size: "large",
    description: "+7 lectors",
    descriptionHref: "#"
}} %}{% endembed %}

{% set Avatars = [
{src: 'https://i.pravatar.cc/64?img=1', alt: 'Lector AD', href: "#"},
{src: 'https://i.pravatar.cc/64?img=2', alt: 'Lector BC'},
{src: 'https://i.pravatar.cc/64?img=3', alt: 'Lector CD'},
{src: 'https://i.pravatar.cc/64?img=4', alt: 'Lector DE'},
{placeholderText: 'AB', alt: 'Lector EF'},
] %}
...
<AvatarGroup avatars="{{Avatars}}" size="small" description="+1" />
...
<AvatarGroup avatars="{{Avatars}}" description="+2" />
<AvatarGroup avatars="{{Avatars}}" />
...
<AvatarGroup avatars="{{Avatars}}" size="large" description="+7 lectors" descriptionHref="#" />

API

Prop name	Type	Default	Required	Description
`avatars`	`Array[{?src: string, ?srcSet: string, alt: string, ?url: string, ?placeholderText: string}]`	-	yes	Array of avatars images or placeholders
`size`	Size Dictionary	`medium`	no	Size of the component
`description`	`string`	-	no	Text supplementing after avatars
`descriptionHref`	`string`	-	no	Link url for supplementing text after avatars
`UNSAFE_className`	`string`	-	no	Wrapper custom classname

On this page