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", "switch" | \- |
| title | string | \- |
| subtitle | string | \- |
| meta | string | \- |
| border | boolean | \- |
| fontWeight | "bold", "regular", "semibold" | \- |
| attributes | { \[key: string\]: string; } | \- |
| linkAttributes | Applies to the left element: anchor<br />{ \[key: string\]: string; } | \- |
| disabled | boolean | \- |
| forcePx | boolean | \- |
| classNames | string | \- |
| leadingIcon | "search", "link", "x", "wifi\_off", "volume\_up", "volume\_off", "visibility\_off", "visibility" | \- |
| accordionContent | any | \- |
| name | string | "ds-list-item" |
| href | Links entire list item<br />string | \- |
| interactiveElementAttributes | Applied to the right element: checkbox or button ('toggle')<br />{ \[key: string\]: string; } | \- |
| interactiveElementClassNames | string | \- |
| checked | boolean | \- |
| stripLabel | boolean | \- |
| mediaHtml\* | string | \- |
| trailingIcon | "search", "link", "x", "wifi\_off", "volume\_up", "volume\_off", "visibility\_off", "visibility" | \- |
| showMeta | boolean | \- |
| metaOn | string | \- |
| metaOff | string | \- |
| componentClassName | string | \- |
| titleHref | Only links title<br />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", "x", "wifi\_off", "volume\_up", "volume\_off", "visibility\_off", "visibility" | \- |
| fullWidth | Button will be full width on both desktop and mobile<br />boolean | \- |
| size | "sm", "lg", "md", "xl" | \- |
| loading | boolean | \- |
| isIconButton | boolean | \- |
| selected | boolean | \- |
| selectedIconName | "search", "link", "x", "wifi\_off", "volume\_up", "volume\_off", "visibility\_off", "visibility" | \- |
| mobileFullWidth | Button will only full width on mobile<br />boolean | \- |

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