- GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
- Storybook: [ArticleBodyImage](https://designsystem.dn.se/?path=/docs/article-articlebodyimage--docs)
- Storybook (Latest): [ArticleBodyImage](https://designsystem-latest.dn.se/?path=/docs/article-articlebodyimage--docs)

----

# ArticleBodyImage

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|imageHtml | String | yes | | | Use to populate figure tag with image information |
|fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
|caption | String | no | | | Ex "Detta är en bildtext" |
|imageType | String | no | | | Type of image. Ex "Foto" |
|author | String | no | | | Ex "Paul Hansen" |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}

{{ ArticleBodyImage({
  imageHtml: exampleArticleBodyImageHtml(),
  fullWidth: true,
  caption: "En bildtext",
  imageType: "Foto",
  author: "Paul Hansen"
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
```