LinkBox
=======

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

| Name | Description | Default |
|:--- | :--- | :--- |
| linkBoxItems\* | Array with link objects. Ex. \[ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: ", ", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } \]<br />LinkBoxItemProps\[\] | \- |
| vignetteText | Heading of the link box<br />string | \- |
| vignetteTargetUrl | Target URL for the header<br />string | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<LinkBox
  linkBoxItems={[
    {
      label: 'Sverige runt',
      layout: 'quiz',
      link: '#',
      media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
      text: '23 quiz'
    },
    {
      label: 'Film & TV',
      layout: 'quiz',
      link: '#',
      media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
      text: '190 quiz'
    },
    {
      label: 'Jorden runt',
      layout: 'quiz',
      link: '#',
      media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
      text: '8 quiz'
    },
    {
      label: 'Djur & Natur',
      layout: 'quiz',
      link: '#',
      media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
      text: '65 quiz'
    },
    {
      label: 'Kultur & Böcker & Scenkonst & Museum',
      layout: 'quiz',
      link: '#',
      media: <ExamplePicture alt="16:9 UTF8 SVG" className="picture picture--placeholder" src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' style='background-color: %23EDEDED;' /%3E" style={{aspectRatio: '16 / 9'}}/>,
      text: '3 quiz'
    }
  ]}
  vignetteText="Välj kategori – massor av quiz väntar"
/>
```