email-organizer/offline-docs/daisyui/avatar.md

Avatar Component

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

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

Avatar

<div class="$$avatar">
  <div class="w-24 rounded">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>

Avatar in custom sizes

<div class="$$avatar">
  <div class="w-32 rounded">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-20 rounded">
    <img
      src="https://img.daisyui.com/images/profile/demo/[email protected]"
      alt="Tailwind-CSS-Avatar-component"
    />
  </div>
</div>
<div class="$$avatar">
  <div class="w-16 rounded">
    <img
      src="https://img.daisyui.com/images/profile/demo/[email protected]"
      alt="Tailwind-CSS-Avatar-component"
    />
  </div>
</div>
<div class="$$avatar">
  <div class="w-8 rounded">
    <img
      src="https://img.daisyui.com/images/profile/demo/[email protected]"
      alt="Tailwind-CSS-Avatar-component"
    />
  </div>
</div>

Avatar rounded

<div class="$$avatar">
  <div class="w-24 rounded-xl">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>

Avatar with mask

<div class="$$avatar">
  <div class="$$mask $$mask-heart w-24">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-squircle w-24">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-hexagon-2 w-24">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>

Avatar group

<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
</div>

Avatar with online/offline indicator

<div class="$$avatar $$avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar $$avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>

Avatar with placeholder

<div class="$$avatar $$avatar-placeholder">
  <div class="w-24 rounded-full bg-neutral text-neutral-content">
    <span class="text-xl">A</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="w-24 rounded-full bg-primary text-primary-content">
    <span class="text-xl">B</span>
  </div>
</div>

NEXUS Official daisyUI Dashboard Template

Available on daisyUI store

More details