<a id="avatar"></a>

## Avatar  
**Category**: Data Display

### Examples

#### Basic Avatar  
```python
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded'
    ),
    cls='avatar'
)
```

#### Avatar Sizes  
```python
Div(
    Div(
        Img(src='...'),
        cls='w-32 rounded'
    ),
    cls='avatar'
)
# Repeat with w-20, w-16, w-8
```

#### Rounded Avatars  
```python
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded-xl'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded-full'
    ),
    cls='avatar'
)
```

#### Masked Avatars  
```python
Div(
    Div(
        Img(src='...'),
        cls='mask mask-squircle w-24'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='mask mask-hexagon w-24'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='mask mask-triangle w-24'
    ),
    cls='avatar'
)
```

#### Avatar Group  
```python
Div(
    *(Div(
        Div(Img(src='...'), cls='w-12'),
        cls='avatar'
    ) for _ in range(4)),
    cls='avatar-group -space-x-6 rtl:space-x-reverse'
)
```

#### Group with Counter  
```python
Div(
    Div(
        *(Div(
            Div(
                Img(src='...'),
                cls='w-12'
            ),
            cls='avatar'
        ) for _ in range(3)),
    Div(
        Div(
            Span('+99'),
            cls='bg-neutral text-neutral-content w-12'
        ),
        cls='avatar avatar-placeholder'
    ),
    cls='avatar-group -space-x-6 rtl:space-x-reverse'
)
```

#### Ring Indicator  
```python
Div(
    Div(
        Img(src='...'),
        cls='ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2'
    ),
    cls='avatar'
)
```

#### Presence Indicator  
```python
Div(
    Div(Img(src='...'), cls='w-24 rounded-full'),
    cls='avatar avatar-online'
)
Div(
    Div(Img(src='...'), cls='w-24 rounded-full'),
    cls='avatar avatar-offline'
)
```

#### Letter Placeholders  
```python
Div(
    Div(
        Span('D', cls='text-3xl'),
        cls='bg-neutral text-neutral-content w-24 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
Div(
    Div(
        Span('AI', cls='text-xl'),
        cls='bg-neutral text-neutral-content w-16 rounded-full'
    ),
    cls='avatar avatar-online avatar-placeholder'
)
Div(
    Div(
        Span('SY'),
        cls='bg-neutral text-neutral-content w-12 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
Div(
    Div(
        Span('UI', cls='text-xs'),
        cls='bg-neutral text-neutral-content w-8 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
```