TeaserLarge
===========

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

| Name | Description | Default |
|:--- | :--- | :--- |
| bylinePicture | Image of the author<br />ComponentChild | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |
| classNames | Ex. "my-special-class"<br />string | \- |
| sectionName | Shows in teaser footer<br />string | \- |
| bylineHtml | Byline HTML<br />string | \- |
| bylineAspectRatio | Byline aspect ratio<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 |
| isLargeHeadline | If the headline should be large (only if `isItalicHeadline` is true)<br />boolean | false |
| isItalicHeadline | If the headline should be italic<br />boolean | false |
| title\* | Heading of the teaser<br />string | \- |
| isSquareImage | Flag so we can handle square teaser images<br />boolean | \- |
| media | Main image or other media<br />ComponentChild | \- |
| sticker | Red text before the text<br />string | \- |
| highlight | Text before the heading<br />string | \- |
| vignette | Top text in the teaser<br />string | \- |
| text | Teaser subtext<br />string | \- |
| theme | The theme-class to apply to the teaser<br />"nyheter", "kultur" | \- |
| areaType | The area where the column is rendered<br />"right", "bauta", "main" | \- |
| variant | Variant of the teaser<br />"default", "podcast", "insandare", "direkt" | "default" |
| targetLink\* | Target URL for the teaser<br />string | \- |

```jsx
<TeaserLarge
  highlight="Large:"
  isLargeHeadline
  media={<TeaserImage byline="Foto: Alexander Mahmoud" image={<ExamplePicture alt="Strumpor på torklina" className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C300:169&crop=300:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C227:128&crop=227:h;center,top&output-quality=80 227w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C300:169&crop=300:h;center,top&output-quality=80 300w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C454:256&crop=454:h;center,top&output-quality=60 454w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/708402b6-f6cb-4317-a750-d68bef6db08c.jpeg?interpolation=lanczos-none&fit=around%7C600:338&crop=600:h;center,top&output-quality=60 600w" style={{aspectRatio: '16 / 9'}}/>}/>}
  sticker="TV"
  targetLink="https://www.dn.se/krigets-svallvagor/"
  text="Rysslandsexperten: Därför anföll han Ukraina • Så har invasionen förändrat världen."
  title="”I kriget kunde Putin ge efter för sina instinkter”"
  vignette="EN PUFF MED ALLT"
/>
```