# Avatar

## Visual Structure

```
ga-avatar [--small|--large]
```

## Elements Hierarchy

### Core Block

- `ga-avatar` - Main container for the entire avatar component (default size 40px × 40px)

### Modifiers

- `ga-avatar--small` - Smaller sized avatar (24px × 24px)
- `ga-avatar--large` - Larger sized avatar (64px × 64px)

## Examples

### Text

```html
<span class="ga-avatar ga-avatar--small">RB</span>
<span class="ga-avatar">RB</span>
<span class="ga-avatar ga-avatar--large">RB</span>
```

### Icon

```html
<span class="ga-avatar ga-avatar--small">
  <!-- icon: user-round, size=16 -->
</span>
<span class="ga-avatar"><!-- icon: user-round, size=30 --></span>
<span class="ga-avatar ga-avatar--large">
  <!-- icon: user-round, size=44 -->
</span>
```

### Image

```html
<span class="ga-avatar ga-avatar--small">
  <img src="https://i.pravatar.cc/64?img=70" />
</span>
<span class="ga-avatar"><img src="https://i.pravatar.cc/64?img=70" /></span>
<span class="ga-avatar ga-avatar--large">
  <img src="https://i.pravatar.cc/64?img=70" />
</span>
```