TeaserCounter
=============

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

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

```jsx
<TeaserCounter
  classNames="test-class"
  counterNumber={124}
  counterText="DAGAR I <br> FÄNGELSE"
  media={<ExamplePicture className="picture picture--placeholder" src="https://dev.static.bonniernews.se/gcs/patron/2025/05/afa4321ec1db2abce9d2c85d5d8176d4431faeb8-1747137466945.jpg?io=1&crop=3:4,smart&height=184" style={{aspectRatio: '3 / 4'}}/>}
  subtitle="fängslad i Turkiet för sin journalistik"
  title="Joakim Medin"
/>
```