TeaserTextOnImage
=================

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

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

```jsx
<TeaserTextOnImage
  media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="" className="picture picture--placeholder" sizes="1010px" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2ff5d902-4e11-4634-b356-84200e86ded8.jpeg" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2ff5d902-4e11-4634-b356-84200e86ded8.jpeg?io=1&amp;width=1010 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2ff5d902-4e11-4634-b356-84200e86ded8.jpeg?io=1&amp;width=2020&amp;quality=60 2020w" style={{aspectRatio: '2 / 3'}}/>}/>}
  targetLink="https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/"
  text="Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent."
  title="Ludmila Engquist: 'Det skulle kännas fel att dö utan att ha förklarat sig'"
  vignette="DN Intervju"
/>
```