TeaserStandard
==============

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

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/components/teaser-standard/teaser-standard.scss'`

[](#javascript)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);
```

| Name | Description | Default |
|:--- | :--- | :--- |
| isItalicHeadline | If the headline should be italic<br />boolean | \- |
| sectionName | Shows in teaser footer<br />string | \- |
| duration | Duration of podcast<br />string | \- |
| publicationTime | Publication time text<br />string | \- |
| isFlashingDot | If there should be a flashing ball before the text<br />boolean | false |
| sticker | Red text before the text<br />string | \- |
| text | Teaser subtext<br />string | \- |
| bylinePicture | Byline image<br />ComponentChild | \- |
| media | Main image or other media<br />ComponentChild | \- |
| vignette | Top text in the teaser<br />string | \- |
| isCompact | If the teaser should be compact<br />boolean | \- |
| highlight | Text before the heading<br />string | \- |
| theme | The theme-class to apply to the teaser<br />"kultur", "nyheter" | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
| classNames | Ex. "my-special-class"<br />string | \- |
| areaType | The area where the column is rendered<br />"main", "right", "bauta" | \- |
| targetLink | Target URL for the teaser<br />string | \- |
| title\* | Heading of the teaser<br />string | \- |
| isSquareImage | Flag so we can handle square teaser images<br />boolean | false |
| variant | Variant of the teaser<br />"default", "podcast" | \- |

```jsx
<TeaserStandard
  media={<TeaserImage byline="Foto: Paul Hansen" image={<ExamplePicture alt="" className="picture picture--placeholder" sizes="(min-width: 1340px) 1010px, (min-width: 1100px) calc(100vw - 330px), 100vw" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C770:434&amp;crop=770:h;center,top&amp;output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1010:569&amp;crop=1010:h;center,top&amp;output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C1540:867&amp;crop=1540:h;center,top&amp;output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/752e4f6d-7c66-4d24-81b1-4b24b12771a9.jpeg?interpolation=lanczos-none&amp;fit=around%7C2020:1137&amp;crop=2020:h;center,top&amp;output-quality=60 2020w" style={{aspectRatio: '16 / 9'}}/>}/>}
  targetLink="https://www.dn.se/sverige/ryska-militarflyg-over-ostersjon/"
  text=" Flög utan transpondrar • Upptäcktes av tyska flygvapnet."
  title="Ryska militärflyg över Östersjön"
/>
```