GroupHeader
===========

*   GitHub: [BonnierNews/dn-design-system/web/src/components/group-header](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/group-header)
*   Storybook: [GroupHeader](https://designsystem.dn.se/?path=/docs/basic-groupheader--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/group-header/group-header.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| title\* | The title text<br />string | \- |
| type | The type of interactive element added to the header<br />"link", "icon", "toggle", "arrows" | "icon" |
| variant | The design variant, if not bauta the group header will get the 'standard' design<br />"bauta", "default" | \- |
| media | The image element for the header<br />ComponentChild | \- |
| href | If given, the title is rendered as a link<br />string | \- |
| linkText | The link text to render (only for types `link` and `arrows`)<br />string | \- |
| showBottomBorder | If true there will be a bottom border<br />boolean | false |
| toggleText | `text` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
| toggleSelectedText | `selectedText` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
| toggleSelected | `selected` parameter to ToggleButton (only for type `toggle`)<br />boolean | false |
| toggleLoading | `loading` parameter to ToggleButton (only for type `toggle`)<br />boolean | false |
| toggleClassNames | `classNames` parameter to ToggleButton (only for type `toggle`)<br />string | \- |
| toggleAttributes | `attributes` parameter to ToggleButton (only for type `toggle`)<br />{ \[key: string\]: string; } | { } |
| channel | Used to include or exclude elements based on channel<br />"mobile", "tablet", "desktop" | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<GroupHeader title="Dn granskar" />
```