- 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)
- Storybook (Latest): [TeaserTextOnImage](https://designsystem-latest.dn.se/?path=/docs/section-teasertextonimage--docs)

----

# teaser-text-on-image

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|title | String | yes | | | Heading of the teaser |
|targetLink | String | yes | | | Target URL for the teaser |
|text | String | no | | | Teaser subtext |
|vignette | String | no | | | Top text in the teaser |
|mediaHtml | HTML String | yes | | | Main image |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | | | | | Not supported |

## Minimum requirement example
These are copy paste friendly examples to quickliy get started using a component.

### Nunjucks
```html
{% from '@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image.njk' import TeaserTextOnImage %}

{{ TeaserTextOnImage({
  title: 'Ludmila Engquist: "Det skulle kännas fel att dö utan att ha förklarat sig"',
  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.",
  mediaHtml: "text-on-image",
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image" as *;
```