- GitHub: [BonnierNews/dn-design-system/../web/src/components/profile-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/profile-header)
- Storybook: [ProfileHeader](https://designsystem.dn.se/?path=/docs/section-Profileheader--docs)
- Storybook (Latest): [ProfileHeader](https://designsystem-latest.dn.se/?path=/docs/section-Profileheader--docs)

----

# Profile header

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|title | String | yes | | | H1 Title |
|subtitleHtml | String | yes | | | Subtitle (email) |
|mediaHtml | String | no | | | Main image |
|descriptionHtml | String | no | | | Intended use is text, links |
|articleCount | int | no | | | Total articles on this list-page |
|toggle | Bool | no | true, false | false | Show/hide toggle button |
|toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |
|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only if `toggle` is enabled) |
|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only if `toggle` is enabled) |
|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only if `toggle` is enabled) |
|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only if `toggle` is enabled) |
|classNames | String | no | | | Ex. "my-special-class" |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|~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/profile-header/profile-header.njk' import ProfileHeader %}

{{ ProfileHeader(
  {
    title: "Johan Croneman",
    descriptionHtml: "<p>Johan Croneman är journalist på Dagens Nyheter.</p>"
  }
)}}
```

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