TeaserCard
==========

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

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

```jsx
<TeaserCard>
  <div
    style={{
      height: '48px'
    }}
   />
</TeaserCard>
```