- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-package](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-package)
- Storybook: [TeaserPackage](https://designsystem.dn.se/?path=/docs/section-teaserpackage--docs)
- Storybook (Latest): [TeaserPackage](https://designsystem-latest.dn.se/?path=/docs/section-teaserpackage--docs)

----

# teaser-package

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|teasersHtml | HTML String | yes | | | HTML teaser output |
|vignetteText | String | yes | | | Heading of the teaser |
|vignetteTargetUrl | String | no | | | Target URL for the teaser |
|vignetteIconHtml | string | no | | | The icon markup for the vignette |
|areaType | String | no | "bauta" | | The area where the column is rendered |
|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | | | | | Not supported |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/teaser-package/teaser-package.njk' import TeaserPackage %}

{{ TeaserPackage({
  teasersHtml: "",
  areaType: "bauta",
  vignetteText: "Svensk politik",
  vignetteTargetUrl: "/om/svensk-politik/"
})}}
```

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