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

----

# TeaserCard

This component is the basis for all Teasers. While it does not render much itself, it brings a common styling base for its children.

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|targetLink | String | no | | | If given, the card will render as a link |
|areaType | String | no | '', 'right', 'bauta', | '' | The area the teaser will be rendered in |
|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
|classNames | String | no | | | Ex. "ds-teaser--large" |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|~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-card/teaser-card.njk' import TeaserCard %}

{% call TeaserCard({
  targetLink: 'https://www.dn.se/',
}) %}
  (content)
{% endcall %}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/assets/teaser/teaser";
```