notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

offline docs

Browse Source
This commit is contained in:
Bryce
2025-08-13 09:33:19 -07:00
parent 2a451ce840
commit b7801a0caa
43 changed files with 4617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
offline-docs/daisyui/avatar.md Normal file
View File

@@ -0,0 +1,155 @@
# 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>
```
![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)
## NEXUS Official daisyUI Dashboard Template
## Available on daisyUI store
[More details](/store)