Avatar
Classes Information
| ClassName | Description |
|---|---|
| avatar | Avatar elements |
| avatar-squared | Avatar with square |
| avatar-group | Avatar group base |
| avatar-online | Online Status |
| avatar-ring | Avatar with ring |
| avatar-ring-primary | Avatar with ring primary |
| avatar-ring-success | Avatar with ring success |
| avatar-ring-warning | Avatar with ring warning |
| avatar-ring-error | Avatar with ring error |
| avatar-xs | extra small size |
| avatar-sm | small size |
| avatar-md | medium small size |
| avatar-lg | large small size |
| avatar-xl | extra large small size |
Basic Usage
Example Code
html
<div class="avatar">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>Squered
Example Code
html
<div class="avatar avatar-square">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>Ring Color
Example Code
html
<div class="avatar avatar-ring">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-primary">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-success">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-warning">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-error">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>Online
Example Code
html
<div class="avatar avatar-online">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>Sizes
Example Code
html
<div class="avatar avatar-xs">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-sm">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-md">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-lg">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-xl">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>Group
+99
Example Code
html
<div class="avatar-group">
<div class="avatar">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-warning">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-success">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-error">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar avatar-ring-primary">
<img src="https://xsgames.co/randomusers/avatar.php?g=female" alt="avatar" />
</div>
<div class="avatar">
<div>+99</div>
</div>
</div>Dropdown
Example Code
html
<div class="avatar avatar-ring avatar-md">
<div class="dropdown-container">
<div class="dropdown">
<label class="btn btn-ghost flex cursor-pointer px-0 hover:bg-inherit" tabindex="0">
<img src="https://i.pravatar.cc/150?u=a042581f4e29026024d" alt="avatar" />
</label>
<div class="dropdown-menu dropdown-menu-bottom-right">
<a class="dropdown-item text-sm">Profile</a>
<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
<a tabindex="-1" class="dropdown-item text-sm">Logout</a>
</div>
</div>
</div>
</div>