# Card

## Visual Structure

```
ga-card [--selectable|--disabled]
```

## Elements Hierarchy

### Core Block

- `ga-card` - Main container for the entire card component

### Modifiers

- `ga-card--selectable` - Makes the card interactive/clickable
- `ga-card--disabled` - Styles the card as disabled/non-interactive
- `ga-card--selected` - Styles the card as selected

## Examples

### Default

```html
<div class="ga-card">
  <h2 class="font-bold">Card title</h2>
  <div>Card description</div>
</div>
```

### Selectable

```html
<div role="button" tabindex="0" class="ga-card ga-card--selectable">
  <h2 class="font-bold">Card title</h2>
  <div>Card description</div>
</div>
```

### Selected

```html
<div class="ga-card ga-card--selectable ga-card--selected">
  <h2 class="font-bold">Card title</h2>
  <div>Card description</div>
</div>
```

### Disabled

```html
<div class="ga-card ga-card--disabled">
  <h2 class="font-bold">Card title</h2>
  <div>Card description</div>
</div>
```