TeaserListSwipe
===============
* GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-list-swipe](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-list-swipe)
* Storybook: [TeaserListSwipe](https://designsystem.dn.se/?path=/docs/section-teaserlistswipe--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-swipe/teaser-list-swipe.scss'`
| Name | Description | Default |
|:--- | :--- | :--- |
| title\* | The header of the teaser list
string | \- |
| areaType | The area where the column is rendered
"main", "bauta" | \- |
| titleHref | Target URL for the header
string | \- |
| arrowPosition | Determines where the scroll arrows are rendered
"floating", "header" | "header" |
| teasers | A list of arguments to TeaserSwipeCard
TeaserSwipeCardProps\[\] | \[\] |
| groupHeaderType | Type of group header
"link", "icon", "toggle", "arrows" | \- |
| groupHeaderToggleText | Text in toggle button
string | \- |
| groupHeaderToggleSelectedText | Text in toggle button when selected
string | \- |
| groupHeaderToggleSelected | Is toggle button selected or not
boolean | false |
| groupHeaderToggleClassNames | Class names for toggle button
string | \- |
| groupHeaderToggleAttributes | Attributes for toggle button. Ex. { "data-entity-id": "dn.epi.434" }
Record | { } |
| channel | Used to include or exclude elements based on channel
"mobile", "tablet", "desktop" | \- |
| classNames | Ex. "my-special-class"
string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }
Record | { } |
```jsx
}/>,
targetLink: '#',
time: '12:34',
title: 'Riktigt bra politik nu',
variant: 'insandare',
vignette: 'Sverige'
},
{
highlight: 'Insändare:',
media: }/>,
targetLink: '#',
time: '11:42',
title: 'Ska det vara så här nu?',
variant: 'insandare'
},
{
highlight: 'Insändare:',
media: }/>,
targetLink: '#',
time: '10:24',
title: 'Avskaffa något jag inte tycker om',
variant: 'insandare',
vignette: 'Världen'
},
{
highlight: 'Insändare:',
media: }/>,
targetLink: '#',
time: '09:58',
title: 'Man borde bitit hund på Kungsgatan',
variant: 'insandare',
vignette: 'Sverige'
}
]}
title="Insändare"
titleHref="#"
/>
```