## Basic usage

```
<ds-list>
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
```

## Ordered list

Use an ordered list to display a sorted set of items.

```
<ds-list ordered>
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
```

## Custom icon

Provide a custom icon for the list items.

```
<ds-list icon="user">
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
```

## Sizes

Use different sizes to create hierarchy.

```
<ds-list size="x-large">
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
<ds-list size="large">
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
<ds-list size="base">
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
<ds-list size="small">
  <ds-list-item>Layout components</ds-list-item>
  <ds-list-item>Typography components</ds-list-item>
  <ds-list-item>Navigation components</ds-list-item>
</ds-list>
```
