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

----

# teaser-standard

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|title | String | yes | | | Heading of the teaser |
|targetLink | String | yes | | | Target URL for the teaser |
|variant | String | no | "default" or "podcast" | "default" | |
|areaType | String | no | "right" or "bauta" | | The area where the column is rendered |
|theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to the teaser |
|text | String | no | | | Teaser subtext |
|vignette | String | no | | | Top text in the teaser |
|highlight | String | no | | | Text before the heading |
|sticker | String | no | | | Red text before the text |
|mediaHtml | HTML String | no | | | Main image or other media |
|bylineHtml | HTML String | no | | | Side image of the author |
|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
|isCompact | bool | no | true, false | false | If the headline should be compact |
|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
|publicationTime | string | no | | null | Publication time text. |
|duration | string | no | | null | Duration of podcast. |
|isSquareImage | boolean | no | | false | Flag so we can handle square teaser images |
|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-standard/teaser-standard.njk' import TeaserStandard %}

{{ TeaserStandard({
  title: "Upp på börsen",
  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
  highlight: "Ekonominytt:"
})}}
```

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

### Javascript
This version is rarely used to render a teaser dynamically in the browser. For example, it is used to render reserv-teasers in failover. This version **ONLY** supports the `title`, `text`, `targetLink`, `classNames` and `attributes` parameters.

```javascript
import { dsTeaserStandard } from "@bonniernews/dn-design-system-web/components/teaser-standard/teaser-standard";

// NB: javascript only supports a subset of all parameters
const parameters = {
  title: "Upp på börsen",
  text: "Det ser ganska normalt ut på Stockholmsbörsen",
  targetLink: "https://www.dn.se/ekonomi/",
  attributes: { "data-test" : "test-value" }
}

const teaserStandardHtml = dsTeaserStandard(parameters);
```