{% legacy %}

# lists components

Components for working with lists.

## Examples

### List Columned
#### HTML
```html
<ul class="c-list-columned">
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
    <li class="c-list-columned__item">
        <!-- Content -->
    </li>
</ul>
```

### List Description
#### HTML
```html
<div class="c-list-description__item">
    <dt class="c-list-description__term">
        <!-- Content -->
    </dt>
    <dd class="c-list-description__details">
        <!-- Content -->
    </dd>
</div>
```

### List Group
#### HTML
```html
<ul class="c-list-group c-list-group--bordered">
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
    <li class="c-list-group__item">
        <!-- Content -->
    </li>
</ul>
```

### List Header
![image](https://i.imgur.com/wHNpnJt.png)

#### HTML
```html
<div class="c-list-header">
    <span><!-- Left aligned content --></span>
    <button><!-- Right aligned content --></button>
</div>
```

#### Example

![image](https://i.imgur.com/g8jZ24b.png)

