# List group

[component-header:sl-list]

This is the container for [list items](components/list-item.md).

## Examples


```html preview
<sl-list>
  <sl-list-item value="jane">
    <sl-avatar slot="prefix" initials="JD"></sl-avatar>
    <sl-label>Jane Doe</sl-label>
    <sl-label size="small" color="medium">Bookkeeper</sl-label>
    <sl-badge slot="suffix" type="info">Invited</sl-badge>
  </sl-list-item>
  <sl-list-item value="john">
    <sl-avatar slot="prefix" initials="JD"></sl-avatar>
    <sl-label>John Doe</sl-label>
    <sl-label size="small" color="dark">Mechanic</sl-label>
    <sl-badge slot="suffix" type="info">Invited</sl-badge>
  </sl-list-item>
  <sl-list-item value="don">
    <sl-avatar slot="prefix" initials="DJ"></sl-avatar>
    <sl-label>Don Joe</sl-label>
    <sl-label size="small" color="dark">Musician</sl-label>
    <sl-badge slot="suffix" type="info">Invited</sl-badge>
  </sl-list-item>
</sl-list>
```

### Lines between elements

```html preview
<sl-list lines='full'>
<sl-list-item value="arne">
  <div slot="prefix">
    <sl-label size="x-small">11:00</sl-label>
    <sl-label size="x-small" color="light">11:30</sl-label>
  </div>
  <sl-label size="medium">Arne Hansen</sl-label>
  <sl-label size="small" color="medium">Troels Rytter Vej 4, 1234 Skørby</sl-label>
  <sl-label size="x-small" color="light">
      <sl-icon name="clock-history"></sl-icon>&nbsp;14:00 - 18:00&nbsp;
      <sl-icon name="file-text"></sl-icon>&nbsp;Appended to order&nbsp;
    </sl-label>
  <sl-icon slot="suffix" name="check-circle"></sl-icon>
</sl-list-item>
<sl-list-item value="arne2">
  <div slot="prefix">
    <sl-label size="x-small">11:00</sl-label>
    <sl-label size="x-small" color="light">11:30</sl-label>
  </div>
  <sl-label size="medium">Arne Hansen</sl-label>
  <sl-label size="small" color="medium">Troels Rytter Vej 4, 1234 Skørby</sl-label>
  <sl-label size="x-small" color="light">
      <sl-icon name="clock-history"></sl-icon>&nbsp;14:00 - 18:00&nbsp;
      <sl-icon name="file-text"></sl-icon>&nbsp;Appended to order&nbsp;
    </sl-label>
  <sl-icon slot="suffix" name="check-circle"></sl-icon>
</sl-list-item>
<sl-list-item value="arne3">
  <div slot="prefix">
    <sl-label size="x-small">11:00</sl-label>
    <sl-label size="x-small" color="light">11:30</sl-label>
  </div>
  <sl-label size="medium">Arne Hansen</sl-label>
  <sl-label size="small" color="medium">Troels Rytter Vej 4, 1234 Skørby</sl-label>
  <sl-label size="x-small" color="light">
      <sl-icon name="clock-history"></sl-icon>&nbsp;14:00 - 18:00&nbsp;
      <sl-icon name="file-text"></sl-icon>&nbsp;Appended to order&nbsp;
    </sl-label>
  <sl-icon slot="suffix" name="check-circle"></sl-icon>
</sl-list-item>
<sl-list-item value="arne4">
  <div slot="prefix">
    <sl-label size="x-small">11:00</sl-label>
    <sl-label size="x-small" color="light">11:30</sl-label>
  </div>
  <sl-label size="medium">Arne Hansen</sl-label>
  <sl-label size="small" color="medium">Troels Rytter Vej 4, 1234 Skørby</sl-label>
  <sl-label size="x-small" color="light">
      <sl-icon name="clock-history"></sl-icon>&nbsp;14:00 - 18:00&nbsp;
      <sl-icon name="file-text"></sl-icon>&nbsp;Appended to order&nbsp;
    </sl-label>
  <sl-icon slot="suffix" name="check-circle"></sl-icon>
</sl-list-item>
</sl-list>
```

[component-metadata:sl-list]