Avatar: Group 2

Ready

HTML
View
Info
Notes


        
        <div class="avatar-group -space-x-12">
    <div class="avatar ">
        <div class="w-24">
            <img src="https://picsum.photos/id/64/192/192" alt="" />
        </div>
    </div>
    <div class="avatar ">
        <div class="w-24">
            <img src="https://picsum.photos/id/65/192/192" alt="" />
        </div>
    </div>
    <div class="avatar  placeholder" placeholder="+99">
        <div class="w-24 bg-neutral-focus text-neutral-content">
            <span>+99</span>
        </div>
    </div>
</div>


        @jrmc.avatar.group({ class: '-space-x-12' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/65/192/192' })
  @!jrmc.avatar({ placeholder: '+99' })
@end

Handle: @avatar--group2
Variants (9): Default , Size , Rounded , Mask , Group , Group 2 , Ring , Status , Placeholder
Preview:
- With layout
- Component only
Filesystem Path: fractal/components/02-display/avatar/05-avatar--group2.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