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

----

# Factbox

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|titleHighlight | String | no | | | |
|titleImageHtml | HTML String | no | | | Image |
|title | String | no | | | |
|bodyParts| Object | yes | | | Ex. [{ type: "gradeMeter", grade: "two" }, { type: "paragraph", bodyHtml: "<p>Html markup</p>" }, { type: "image", mediaHtml: "<div class='picture'>..</div>", author: "", caption: "", imageType: "bild"  }]|
|theme | String | no | default, kultur, nyheter | | Design theme |
|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/factbox/factbox.njk' import Factbox %}

{{ Factbox({
  titleHighlight: "",
  title: "Drama",
  bodyParts: [
    {
      "type": "gradeMeter",
      "grade": "2",
    },
    {
      "type": "paragraph",
      "bodyHtml": "<p>”Irrational man”<br />Regi och manus: Woody Allen<br />I rollerna: Joaquin Phoenix, Emma Stone, Parker Posey m fl.<br />Längd: 1 tim 35 min (från 11 år.)</p>"
    },
  ],
  theme: "kultur",
  forcePx: true
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/factbox/factbox" as *;
```