TeaserOnsite
============

Also known as "På Plats-puffen".

In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"

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

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

```jsx
<TeaserOnSite
  media={<TeaserImage image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder-lab/dn-mly/d5e4cd87-61a5-40fc-8060-c4ad5019a9f3.jpeg?interpolation=lanczos-none&fit=around%7C56:56&crop=56:h;center,top&output-quality=80" style={{aspectRatio: '1 / 1'}}/>} />}
  targetLink="https://www.dn.se/varlden/har-forvarades-atombomber-under-kalla-kriget-nu-ar-flygbasen-pa-azorerna-ater-het-for-stormakterna/"
  text="Henrik Brandão Jönsson och Eduardo Leal"
  title="Azorerna"
/>
```