TeaserImage
===========

*   GitHub: [BonnierNews/dn-design-system/web/src/components/teaser-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-image)
*   Storybook: [TeaserImage](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserimage--docs)

Image caption will never scale (forcePx is always true)

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

| Name | Description | Default |
|:--- | :--- | :--- |
| image\* | ComponentChild | \- |
| byline | string | \- |
| mask | "quiz-mask" | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<TeaserImage
  byline="Foto: Paul Hansen"
  image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=480:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=750:*&output-quality=60 750w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/015275ed-234c-4762-b5aa-d61bf5ac6c94.jpeg?interpolation=lanczos-none&downsize=960:*&output-quality=60 960w" style={{aspectRatio: '16 / 9'}}/>}
/>
```