Phoenix UI - Avatar Group

- 0.7.2

Getting started
Getting started
Accordion
Components Accordion
Avatar
Components Avatar
Avatar Group
Components Avatar Group
Backdrop
Components Backdrop
Badge
Components Badge
Breadcrumb
Components Breadcrumb
Button
Components Button
Divider
Components Divider
Paper
Components Paper
Popover
Components Popover
Progress
Components Progress

Avatar Group

Variant Open in playground

<.avatar_group variant="circular">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group variant="rounded">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group variant="square">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>

Max avatars Open in playground

+2

<.avatar_group max={3}>
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>

Total avatars Open in playground

+15

<.avatar_group max={10} total={20}>
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>

Spacing Open in playground

<.avatar_group spacing="xs">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group spacing="sm">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group spacing="md">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group spacing="lg">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group spacing="xl">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>

Size Open in playground

<.avatar_group size="xs">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group size="sm">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group size="md">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group size="lg">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>
<.avatar_group size="xl">
  <:avatar src="/images/avatar1.jpg" />
  <:avatar src="/images/avatar2.jpg" />
  <:avatar src="/images/avatar3.jpg" />
  <:avatar src="/images/avatar4.jpg" />
  <:avatar src="/images/avatar5.jpg" />
</.avatar_group>