ArticleTopImage
===============

*   GitHub: [BonnierNews/dn-design-system/web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
*   Storybook: [ArticleTopImage](https://designsystem.dn.se/?path=/docs/article-articletopimage--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/article-top-image/article-top-image.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| image\* | ComponentChild | \- |
| caption | string | \- |
| author | string | \- |
| imageType | string | \- |
| fullWidth | boolean | \- |
| forcePx | boolean | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<ArticleTopImage
  author="Beatrice Lundborg"
  caption="Detta är en bildtext"
  image={<ExamplePicture className="picture picture--placeholder" src="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C770:434&crop=770:h;center,top&output-quality=80 770w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C1010:569&crop=1010:h;center,top&output-quality=80 1010w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C1540:867&crop=1540:h;center,top&output-quality=60 1540w, https://cached-images.bonnier.news/gcs/bilder/dn-mly/2f8cb117-f4b2-4a3b-a4cc-e51ba294fc1b.jpeg?interpolation=lanczos-none&fit=around%7C2020:1137&crop=2020:h;center,top&output-quality=60 2020w" style={{aspectRatio: '16 / 9'}}/>}
  imageType="Foto"
/>
```