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

----

# Footer

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|linkGroups | Array > Object | yes | | | Ex. [{ title: "Om Dn", attributes: {"data-test": "test"}, links: [{ href: "/kontakt/", text: "Kontakta oss" }] }, { title: "Följ oss", links: [{ href: "#", text: "Twitter", classNames: "twitter-link", attributes: { target: "_blank" } }] }] |
|editorsHtml | HTML String | yes | | | |
|copyright | String | yes | | | |
|rudolf | Object | yes | | | Ex. { imgUrl: "images/rudolf.png", text: "Punkten efter Dagens Nyheter har funnits med.." } |
|buttons | Array > Object | no | | | Ex. [{ text: "Mobil", classNames: "hidden-mobile", attributes: {rel: "nofollow"} }] |
|classNames | String | no | | | Ex. "my-special-class" |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|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/footer/footer.njk' import Footer %}

{{ Footer({
  linkGroups: [
    {
      title: "Om Dn",
      links: [
        {
          href: "/kontakt/",
          text: "Kontakta oss"
        }
      ]
    },
    {
      title: "Följ oss",
      links: [
        {
          href: "#",
          text: "Twitter",
          classNames: "twitter-link",
          attributes: { target: "_blank" }
        }
      ]
    }
  ],
  editorsHtml: "<p>Chefredaktör och ansvarig utgivare:&nbsp;Peter Wolodarski...</p>",
  copyright: "&copy; Dagens Nyheter AB 2023",
  rudolf: {
    imgUrl: "images/rudolf.png",
    text: "Punkten efter Dagens Nyheter har funnits med.."
  },
  buttons: [
    {
      text: "Mobil",
      classNames: "hidden-mobile",
      attributes: {rel: "nofollow"}
    }
  ],
  forcePx: true
})}}
```

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