Factbox
=======

*   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/basic-factbox--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/factbox/factbox.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| title | string | \- |
| titleHighlight | string | \- |
| titleImage | ComponentChild | \- |
| bodyParts\* | BodyPart\[\] | \- |
| theme | "kultur", "nyheter", "default" | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<Factbox
  bodyParts={[
    {
      bodyHtml: '<p>• Minska andelen kött, och framför allt nötkött, i kosten. Nötkött, men även mejeriprodukter som ost, mjölk och smör, bidrar till stora utsläpp när de produceras. Testa att äta mer plantbaserad kost, eller byt ut nötköttet mot kyckling.</p>',
      type: 'paragraph'
    },
    {
      bodyHtml: '<p>• Handla efter säsong. Sockerärtor som är flygfraktade över halva jordklotet ger en stor klimatpåverkan, samma sak med andra färska grönsaker som kräver flygfrakt i stället för båtfrakt. Naturskyddsföreningen har på sin hemsida <a href="https://www.naturskyddsforeningen.se/nyheter/valj-bland-sasongens-godsaker">en lista</a> över när svenska och europeiska frukt- och grönsaker är i säsong.</p>',
      type: 'paragraph'
    }
  ]}
  title="Livsmedel du kan byta ut för att minska ditt klimatavtryck"
  titleHighlight="Tips."
/>
```