# salla-list-tile (https://docs.salla.dev/twilight/react/web-components/salla-list-tile)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A single row for lists and menus: an icon on the start side, a title with an optional subtitle, and an action on the end side.
Use it for account menus, settings lists and similar link rows. The whole row is rendered as one link.
It is a link to `href`, or to `#` when `href` is not set.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-list-tile>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaListTile } from '@salla.sa/twilight-components-react/list-tile';
```

## Try it [#try-it]

<Demo name="web-components/salla-list-tile" />

## Example [#example]

```tsx
import { SallaListTile } from '@salla.sa/twilight-components-react/list-tile';

export function Example() {
  return (
    <SallaListTile href="/account/notifications">
      <i slot="icon" className="sicon-bell-ring"></i>
      <span slot="title">Notifications</span>
      <span slot="subtitle">See your latest updates</span>
      <i slot="action" className="sicon-arrow-left"></i>
    </SallaListTile>
  );
}
```

```html
<salla-list-tile href="/account/notifications">
  <i slot="icon" class="sicon-bell-ring"></i>
  <span slot="title">Notifications</span>
  <span slot="subtitle">See your latest updates</span>
  <i slot="action" class="sicon-arrow-left"></i>
</salla-list-tile>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                               | Type                                                        | Default     |
| -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
| `href`   | `href`    | URL the row links to. Applied as the `href` of the inner link; when empty the link points to `#`. Setting it also adds the `s-list-tile-item-href` class. | `string`                                                    | `undefined` |
| `target` | `target`  | Where to open the link: `_self` (same tab, default), `_blank`, `_parent`, `_top`, or a frame name. Only has an effect together with `href`.               | `"_blank" \| "_parent" \| "_self" \| "_top" \| "framename"` | `"_self"`   |

## Slots [#slots]

| Slot       | Description                                   |
| ---------- | --------------------------------------------- |
| `action`   | An element to display after the title.        |
| `icon`     | An icon to display before the title.          |
| `subtitle` | Additional content displayed below the title. |
| `title`    | The primary content of the list tile.         |

## Related [#related]

Used inside: [`<salla-gifting>`](https://docs.salla.dev/twilight/react/web-components/salla-gifting), [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-scopes>`](https://docs.salla.dev/twilight/react/web-components/salla-scopes), [`<salla-user-settings>`](https://docs.salla.dev/twilight/react/web-components/salla-user-settings).