Avatar: Mask

Ready

HTML
View
Info
Notes


        
        <div class="avatar ">
    <div class="w-24 mask mask-squircle">
        <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar ">
    <div class="w-24 mask mask-hexagon">
        <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>
<div class="avatar ">
    <div class="w-24 mask mask-triangle">
        <img src="https://picsum.photos/id/64/192/192" alt="" />
    </div>
</div>


        @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-squircle' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-hexagon' })
@!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-24 mask mask-triangle' })

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