# List item

[component-header:sl-list-item]

This is an item for [list](components/list.md).

## Examples

### Basic

```html preview
<sl-list>
  <sl-list-item>
    <sl-label>Department #1</sl-label>
  </sl-list-item>
</sl-list>
```

### Two lines

```html preview
<sl-list>
  <sl-list-item>
    <sl-label line-height="small">Inventory settings</sl-label>
    <sl-label size="small" line-height="x-small" color="medium">3 warehouses</sl-label>
  </sl-list-item>
</sl-list>
```

### Two lines and icons

```html preview
<sl-list>
  <sl-list-item>
    <sl-label line-height="small">Inventory settings</sl-label>
    <sl-label size="small" line-height="x-small" color="medium">3 warehouses</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-list-item>
</sl-list>
```

### Prefix

```html preview
<sl-list>
  <sl-list-item>
    <sl-avatar slot="prefix" initials="JD"></sl-avatar>
    <sl-label size="large">John Doe</sl-label >
    <sl-label size="small" color="medium">Administrator</sl-label>
  </sl-list-item>
</sl-list>
```

### Suffix

```html preview
<sl-list>
  <sl-list-item>
    <sl-avatar slot="prefix" initials="JD"></sl-avatar>
     <sl-label size="large">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>
```

```html preview
<sl-list>
  <sl-list-item>
    <sl-avatar slot="prefix" initials="Xe" shape="square"></sl-avatar>
     <sl-label size="large">Stallion Design Company </sl-label>
    <sl-label size="small" color="medium">Administrator </sl-label>
    <sl-badge slot="suffix" type="warning">Expirering soon</sl-badge>
  </sl-list-item>
</sl-list>
```

### 3 lines together with prefix and suffix
```html preview
<sl-list>
<sl-list-item>
  <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>
```

You can put different actions into to the suffix slot.

```html preview
<sl-list>
  <sl-list-item>
     <sl-label>Icon button</sl-label>
    <sl-icon-button slot="suffix" name="trash"></sl-icon-button>
  </sl-list-item>

  <sl-list-item>
    <sl-icon slot="prefix" name="file"></sl-icon>
     <sl-label>Checkbox</sl-label>
    <sl-checkbox slot="suffix"></sl-checkbox>
  </sl-list-item>

  <sl-list-item>
    <sl-icon slot="prefix" name="gear-wide-connected"></sl-icon>
     <sl-label>Switch</sl-label>
    <sl-switch slot="suffix"></sl-switch>
  </sl-list-item>

  <sl-list-item>
    <sl-icon slot="prefix" name="file"></sl-icon>
     <sl-label>Dropdown</sl-label>
    <sl-dropdown slot="suffix">
      <sl-icon-button slot="trigger" name="three-dots"></sl-icon-button>
      <sl-menu>
        <sl-menu-item>Edit</sl-menu-item>
        <sl-menu-item>Copy</sl-menu-item>
        <sl-menu-item>Delete</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </sl-list-item>
</sl-list>
```

## Options

### Link

A list item is considered "clickable" if it has a `href`. A chenvron icon will automatically be applied.

```html preview
<sl-list>
  <sl-list-item href="#">
     <sl-label size="large">Voucher no. 323987 </sl-label>
    <sl-label size="small" color="medium">03-09-2021 </sl-label>
  </sl-list-item>
</sl-list>
```

[component-metadata:sl-list-item]