Avatar: Placeholder

Ready

HTML
View
Info
Notes


        
        <div>
    <div class="avatar  placeholder" placeholder="K">
        <div class="w-24 bg-neutral-focus text-neutral-content">
            <span>K</span>
        </div>
    </div>
    <div class="avatar online  placeholder" placeholder="JO" status="online">
        <div class="bg-neutral-focus text-neutral-content rounded-full w-16">
            <span>JO</span>
        </div>
    </div>
    <div class="avatar  placeholder" placeholder="AA">
        <div class="bg-primary text-neutral-content mask mask-hexagon w-8">
            <span>AA</span>
        </div>
    </div>
</div>


        <div>
  @!jrmc.avatar({ placeholder: 'K' })
  @!jrmc.avatar({ placeholder: 'JO', status: 'online', class: 'bg-neutral-focus text-neutral-content rounded-full w-16' })
  @!jrmc.avatar({ placeholder: 'AA', class: 'bg-primary text-neutral-content mask mask-hexagon w-8' })
</div>

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