ProfileHeader
=============

*   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)

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/profile-header/profile-header.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| title\* | H1 Title<br />string | \- |
| subtitleHtml | Subtitle (email)<br />string | \- |
| media | Main image<br />ComponentChild | \- |
| descriptionHtml | Intended use is text, links<br />string | \- |
| articleCount | Total articles on this list-page<br />number | \- |
| toggle | Show/hide toggle button<br />boolean | \- |
| toggleText | `text` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |
| toggleSelectedText | `selectedText` parameter to ToggleButton (only if `toggle` is enabled)<br />string | \- |
| toggleSelected | `selected` parameter to ToggleButton (only if `toggle` is enabled)<br />boolean | false |
| toggleLoading | `loading` parameter to ToggleButton (only if `toggle` is enabled)<br />boolean | false |
| toggleClassNames | `classNames` parameter to ToggleButton (only if `toggle` is enabled)<br />string | ", " |
| toggleAttributes | `attributes` parameter to ToggleButton (only if `toggle` is enabled)<br />{ \[key: string\]: string; } | { } |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<ProfileHeader
  articleCount={400}
  descriptionHtml="<p>Peter Wolodarski är chefredaktör och ansvarig utgivare för Dagens Nyheter.</p>"
  media={<ExamplePicture className="picture" sizes="120px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=120:*&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=240:*&output-quality=60 240w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&downsize=480:*&output-quality=60 480w" style={{aspectRatio: '450 / 1020'}}/>}
  subtitleHtml="<a href='mailto:peter.wolodarski@dn.se'>peter.wolodarski@dn.se</a>"
  title="Peter Wolodarski"
  toggle
  toggleSelectedText="Följer"
  toggleText="Följ"
/>
```