TeaserLonglife
==============

*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-longlife](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-longlife)
*   Storybook: [TeaserLonglife](https://designsystem.dn.se/?path=/docs/section-teaserlonglife--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-longlife/teaser-longlife.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| targetLink | Target URL for the teaser<br />string | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |
| title\* | Heading of the teaser<br />string | \- |
| media | Main image or other media<br />ComponentChild | \- |
| vignette | Top text in the teaser<br />string | \- |

```jsx
<TeaserLonglife
  media={<TeaserImage byline="Foto: Alexander Mahmoud" image={<ExamplePicture alt="" className="picture picture--placeholder" sizes="(min-width: 1340px) 649px, (max-width: 1100px) calc(100vw - 320px), calc(100vw - 690px)" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg?interpolation=lanczos-none&amp;fit=around%7C440:248&amp;crop=440:h;center,top&amp;output-quality=80 440w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg?interpolation=lanczos-none&amp;fit=around%7C550:310&amp;crop=550:h;center,top&amp;output-quality=80 550w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg?interpolation=lanczos-none&amp;fit=around%7C649:366&amp;crop=649:h;center,top&amp;output-quality=80 649w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg?interpolation=lanczos-none&amp;fit=around%7C880:495&amp;crop=880:h;center,top&amp;output-quality=60 880w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg?interpolation=lanczos-none&amp;fit=around%7C1100:619&amp;crop=1100:h;center,top&amp;output-quality=60 1100w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/f6daa350-81d4-4ac2-b471-8748eb2a13cc.jpeg?interpolation=lanczos-none&amp;fit=around%7C1298:731&amp;crop=1298:h;center,top&amp;output-quality=60 1298w" style={{aspectRatio: '16 / 9'}}/>}/>}
  targetLink="https://dngranskar.dn.se"
  title="Susa fram på DN-elcykeln"
  vignette="Beställ DN-cykeln"
/>
```