TeaserListVertical
==================

*   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)

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/teaser-list-vertical/teaser-list-vertical.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| listTitle | List title<br />string | \- |
| listLink | Ex. { text: "Alla nyheter", url: "#" }<br />ListLink | \- |
| flexible | If true, the list will be flexible<br />boolean | false |
| teasers\* | 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 } \]<br />ListTeaser\[\] | \- |
| theme | The theme-class to apply to _all_ teasers in the list.<br />"kultur", "nyheter" | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<TeaserListVertical
  listLink={{
    text: 'Alla nyheter',
    url: '#'
  }}
  listTitle="Senaste artiklarna"
  teasers={[
    {
      publicationTime: '14:25',
      sectionName: 'Världen',
      targetLink: '#',
      title: 'Ukraina och Nato närmar sig varandra'
    },
    {
      publicationTime: '14:20',
      sectionName: 'Världen',
      targetLink: '#',
      title: 'Protester mot Sverige i Pakistan'
    },
    {
      publicationTime: '14:06',
      sectionName: 'Kultur',
      targetLink: '#',
      title: 'Därför frossar populärkulturen i nostalgi: ”Vill tillbaka till kollektiv glädje”'
    },
    {
      highlight: undefined,
      publicationTime: '14:25',
      sectionName: 'Sverige',
      targetLink: '#',
      title: 'Växlingskontor tvättade miljontals kronor – tre män döms till långa fängelsestraff'
    },
    {
      highlight: undefined,
      publicationTime: 'I GÅR 12:28',
      sectionName: 'Kultur',
      targetLink: '#',
      title: 'Hanna Fahl: Malmö var det enda rimliga valet för Eurovision'
    }
  ]}
/>
```