- 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)
- Storybook (Latest): [LinkBox](https://designsystem-latest.dn.se/?path=/docs/section-linkbox--docs)

----

# link-box

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|linkBoxItems | Array | yes | | | Array with link objects. Ex. [ { label: 'Sverige runt', text: '42 avsnitt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } } ] |
|vignetteText | String | no | | | Heading of the link box |
|vignetteTargetUrl | String | no | | | Target URL for the header |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | | | | | Not supported |

## 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/link-box/link-box.njk' import LinkBox %}

{{ LinkBox({
  vignetteText: "Välj kategori – massor av quiz väntar",
  linkBoxItems: [
    { label: 'Sverige runt', link: '#', mediaHtml: "", layout: 'quiz', attributes: { "data-test": "list-item-test-data" } },
    { label: 'Film & TV', link: '#', mediaHtml: "", layout: 'quiz' }
  ],
})}}
```

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