Avatar: Size

Ready

HTML
View
Info
Notes


        
        <div>
    <div class="avatar ">
        <div class="w-32 rounded">
            <img src="https://picsum.photos/id/64/192/192" alt="" />
        </div>
    </div>
    <div class="avatar ">
        <div class="w-20 rounded">
            <img src="https://picsum.photos/id/64/192/192" alt="" />
        </div>
    </div>
    <div class="avatar ">
        <div class="w-16 rounded">
            <img src="https://picsum.photos/id/64/192/192" alt="" />
        </div>
    </div>
    <div class="avatar ">
        <div class="w-8 rounded">
            <img src="https://picsum.photos/id/64/192/192" alt="" />
        </div>
    </div>
</div>


        <div>
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-32 rounded' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-20 rounded' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-16 rounded' })
  @!jrmc.avatar({ url: 'https://picsum.photos/id/64/192/192', class: 'w-8 rounded' })
</div>

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