Avatar: Group

Ready

HTML
View
Info
Notes


        
        <div class="avatar-group -space-x-6">
    <div class="avatar ">
        <div class="w-12">
            <img src="https://picsum.photos/id/64/192/192" alt="" />
        </div>
    </div>
    <div class="avatar ">
        <div class="w-12">
            <img src="https://picsum.photos/id/65/192/192" alt="" />
        </div>
    </div>
    <div class="avatar ">
        <div class="w-12">
            <img src="https://picsum.photos/id/338/192/192" alt="" />
        </div>
    </div>
</div>


        @jrmc.avatar.group()
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-12' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/65/192/192', class: 'w-12' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/338/192/192', class: 'w-12' })
@end

Handle: @avatar--group
Variants (9): Default , Size , Rounded , Mask , Group , Group 2 , Ring , Status , Placeholder
Preview:
- With layout
- Component only
Filesystem Path: fractal/components/02-display/avatar/04-avatar--group.edge

Avatar

Doc : daisyui avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Class name	Type
avatar	Component	Container element
avatar-group	Component	Container for grouping multiple avatars
online	Modifier	shows a green dot as online indicator
offline	Modifier	shows a gray dot as online indicator
placeholder	Modifier	to show some letters as avatar placeholder