ListItem
========

*   GitHub: [BonnierNews/dn-design-system/web/src/components/list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/list-item)
*   Storybook: [ListItem](https://designsystem.dn.se/?path=/docs/basic-listitem--docs)

This component is used to render a list item with different types of content. This lists all possible properties. Some are restricted to certain list item types. Check the list item types for more information.

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/list-item/list-item.scss'`

[](#javascript)Javascript
-------------------------

_The javascript is only needed for list items of type accordion or toggle_

```javascript
import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
dsListItem(listElements);
```

| Name | Description | Default |
|:--- | :--- | :--- |
| listItemType\* | "standard", "toggle", "image", "accordion", "checkbox", "radio", "switch" | \- |
| title | string | \- |
| subtitle | string | \- |
| meta | string | \- |
| border | boolean | \- |
| fontWeight | "bold", "regular", "semibold" | \- |
| attributes | { \[key: string\]: string; } | \- |
| forcePx | boolean | \- |
| classNames | string | \- |
| leadingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| accordionContent | any | \- |
| name | string | "ds-list-item" |
| href | string | \- |
| disabled | boolean | \- |
| checked | boolean | \- |
| stripLabel | boolean | \- |
| mediaHtml\* | string | \- |
| trailingIcon | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| selected | boolean | \- |
| id | string | "ds-list-item" |
| value | string | \- |
| showMeta | boolean | \- |
| metaOn | string | \- |
| metaOff | string | \- |
| componentClassName | string | \- |
| titleHref | string | \- |
| toggleText\* | string | \- |
| toggleSelectedText\* | string | \- |
| selectedText\* | string | \- |
| variant | Design variant<br />"primary", "staticWhite", "primaryBlack", "secondaryFilled", "secondaryOutline", "transparent" | \- |
| text | Note: only works on button-tag, not on a-tag<br />string | \- |
| iconName | add, arrow\_back, arrow\_forward etc | | For all available icons see: [https://designsystem.dn.se/?path=/story/foundations-icons--all-icons](https://designsystem.dn.se/?path=/story/foundations-icons--all-icons)<br />"search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| fullWidth | Button will be full width on both desktop and mobile<br />boolean | \- |
| size | "sm", "lg", "md", "xl" | \- |
| loading | boolean | \- |
| isIconButton | boolean | \- |
| selectedIconName | "search", "link", "add", "arrow\_back", "arrow\_forward", "arrow\_outward", "arrow\_upward", "autoplay" | \- |
| mobileFullWidth | Button will only full width on mobile<br />boolean | \- |

```jsx
<ListItem
  leadingIcon="notifications"
  listItemType="standard"
  title="Standard list item"
  trailingIcon="chevron_right"
/>
```