- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-list-vertical](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-vertical)
- Storybook: [TeaserListVertical](https://designsystem.dn.se/?path=/docs/section-teaserlistvertical--docs)
- Storybook (Latest): [TeaserListVertical](https://designsystem-latest.dn.se/?path=/docs/section-teaserlistvertical--docs)

----

# teaser-list-vertical

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|listTitle | String | yes | | | List title |
|listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
|flexible | bool | no | true, false | false | |
|teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" }, showPlayButton: false } ] |
|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | | | | | Not supported |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.njk' import TeaserListVertical %}

{{ TeaserListVertical({
  listTitle: "Senaste artiklarna",
  listLink: { text: "Alla nyheter", url: "#"},
  flexible: true,
  teasers: [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ]
})}}

{{ TeaserListVertical({
  listTitle: "Senaste klippen",
  mediaIcon: "play_arrow-filled",
  teasers: [ { title: 'Svenska hjältehunden Killian arbetar mot klockan i Marocko – är det försent?', vignette: "VÄRLDEN", targetLink: '#', theme: 'nyheter', isItalicHeadline: false, publicationTime: 'I går 21:22', mediaHtml: '<div class="picture"><img class="picture__img" src="??"></div>', video: 'true', attributes: { "data-test": "list-item-test-data" } } ]
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical" as *;
```
### Javascript

Only run this if there is a scrollable list
```javascript
import { dsTeaserListVertical } from '@bonniernews/dn-design-system-web/components/teaser-list-vertical/teaser-list-vertical.js'
const teaserListVerticalWrappers = Array.from(document.getElementsByClassName("ds-teaser-list-vertical--flexible"));
dsTeaserListVertical(teaserListVerticalWrappers);
```