# Link

## Visual Structure

```
ga-link [--inline] [--small|--large|--disabled]
    ├── ga-link__icon (optional)
    ├── text
    └── ga-link__icon (optional)
```

## Elements Hierarchy

### Core Block

- `ga-link` - Main container for the entire link component (default height size 20px)

### Mandatory Elements

- `text` - The text content of the link

### Optional Elements

- `ga-link__icon` - An icon placed before or after the link text

### Modifiers

- `ga-link--inline` - Link to be used inline with text
- `ga-link--small` - Smaller sized link (16px)
- `ga-link--large` - Larger sized link (24px)
- `ga-link--disabled` - Styles the link as disabled/non-interactive

## Examples

### Default

```html
<a class="ga-link ga-link--small" href="#">
  Link
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
</a>
<a class="ga-link" href="#">
  Link
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
</a>
<a class="ga-link ga-link--large" href="#">
  Link
  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
</a>
```

### Inline

```html
<a class="ga-link ga-link--inline ga-link--small" href="#">
  Link
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
</a>
<a class="ga-link ga-link--inline" href="#">
  Link
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
</a>
<a class="ga-link ga-link--inline ga-link--large" href="#">
  Link
  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
</a>
```

### Disabled

```html
<span class="ga-link ga-link--small ga-link--disabled">
  Link
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
</span>
<span class="ga-link ga-link--disabled">
  Link
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
</span>
<span class="ga-link ga-link--large ga-link--disabled">
  Link
  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
</span>
```

### With leading icon

```html
<a class="ga-link ga-link--small" href="#">
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
  Link
</a>
<a class="ga-link" href="#">
  <!-- icon: arrow-right, size=16, class="ga-link__icon" -->
  Link
</a>
<a class="ga-link ga-link--large" href="#">
  <!-- icon: arrow-right, size=24, class="ga-link__icon" -->
  Link
</a>
```

### Only text

```html
<a class="ga-link ga-link--small" href="#">Link</a>
<a class="ga-link" href="#">Link</a>
<a class="ga-link ga-link--large" href="#">Link</a>
```