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<br />string | \- |
| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
| titleHref | Target URL for the header<br />string | \- |
| arrowPosition | Determines where the scroll arrows are rendered<br />"floating", "header" | "header" |
| teasers | A list of arguments to TeaserSwipeCard<br />TeaserSwipeCardProps\[\] | \[\] |
| groupHeaderType | Type of group header<br />"link", "icon", "toggle", "arrows" | \- |
| groupHeaderToggleText | Text in toggle button<br />string | \- |
| groupHeaderToggleSelectedText | Text in toggle button when selected<br />string | \- |
| groupHeaderToggleSelected | Is toggle button selected or not<br />boolean | false |
| groupHeaderToggleClassNames | Class names for toggle button<br />string | \- |
| groupHeaderToggleAttributes | Attributes for toggle button. Ex. { "data-entity-id": "dn.epi.434" }<br />Record<string, string> | { } |
| channel | Used to include or exclude elements based on channel<br />"mobile", "tablet", "desktop" | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<TeaserListSwipe
  teasers={[
    {
      highlight: 'Insändare:',
      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C770:434&amp;crop=770:h;center,top&amp;output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1010:569&amp;crop=1010:h;center,top&amp;output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1540:867&amp;crop=1540:h;center,top&amp;output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C2020:1137&amp;crop=2020:h;center,top&amp;output-quality=60 2020w' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
      targetLink: '#',
      time: '12:34',
      title: 'Riktigt bra politik nu',
      variant: 'insandare',
      vignette: 'Sverige'
    },
    {
      highlight: 'Insändare:',
      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C770:434&amp;crop=770:h;center,top&amp;output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1010:569&amp;crop=1010:h;center,top&amp;output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1540:867&amp;crop=1540:h;center,top&amp;output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C2020:1137&amp;crop=2020:h;center,top&amp;output-quality=60 2020w' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
      targetLink: '#',
      time: '11:42',
      title: 'Ska det vara så här nu?',
      variant: 'insandare'
    },
    {
      highlight: 'Insändare:',
      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C770:434&amp;crop=770:h;center,top&amp;output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1010:569&amp;crop=1010:h;center,top&amp;output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1540:867&amp;crop=1540:h;center,top&amp;output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C2020:1137&amp;crop=2020:h;center,top&amp;output-quality=60 2020w' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
      targetLink: '#',
      time: '10:24',
      title: 'Avskaffa något jag inte tycker om',
      variant: 'insandare',
      vignette: 'Världen'
    },
    {
      highlight: 'Insändare:',
      media: <TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="Statsminister Magdalena Andersson (S) i en stridsvagn vid ett besök på en övning i nordnorska Narvik den 21 mars." className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C770:434&amp;crop=770:h;center,top&amp;output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1010:569&amp;crop=1010:h;center,top&amp;output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1540:867&amp;crop=1540:h;center,top&amp;output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C2020:1137&amp;crop=2020:h;center,top&amp;output-quality=60 2020w' sizes='(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" style={{aspectRatio: 1.7777777777777777}}/>}/>,
      targetLink: '#',
      time: '09:58',
      title: 'Man borde bitit hund på Kungsgatan',
      variant: 'insandare',
      vignette: 'Sverige'
    }
  ]}
  title="Insändare"
  titleHref="#"
/>
```