TeaserPackage
=============

*   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)

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/assets/teaser/teaser.forward.scss';`

This will include the styles for the teaser package and all teasers.

If you **only** want to include the styles for the teaser package, you can do so by importing only teaser-package.scss:

`@use '@bonniernews/dn-design-system-web/components/teaser-package/teaser-package.scss';`

| Name | Description | Default |
|:--- | :--- | :--- |
| areaType | The area where the column is rendered<br />"main", "bauta" | \- |
| vignetteText | string | \- |
| vignetteTargetUrl | string | \- |
| vignetteIcon | ComponentChild | \- |
| teasers | ComponentChild | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |

```jsx
<TeaserPackage
  teasers={<React.Fragment />}
  vignetteTargetUrl="/om/svensk-politik/"
  vignetteText="Svensk politik"
/>
```