# ToolsHeader

A lightweight header with the Reuters Graphics logo and a slot for extra content; optionally sticky.

**Category:** Components/Page furniture/ToolsHeader

**Import:** `import { ToolsHeader } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `children` | `Snippet` | — |  | Snippet content |
| `id` | `string` | `''` |  | ID of the header container |
| `class` | `string` | `''` |  | Add a class to target with SCSS. |
| `sticky` | `boolean` | `false` |  | Make the header stick when user scrolls. |
| `background` | `string` | `'transparent'` |  | Background CSS |
| `borderBottom` | `string` | `'1px solid #dedede'` |  | Border bottom CSS |
| `logoProps` | `{       logoColour?: string;       textColor?: string;     }` | `{ logoColour: '#404040' }` |  | Colour props passed to `ReutersGraphicsLogo` component. |
| `homeLink` | `string` | `'/'` |  | Link the logo points to. |

## Examples

### Demo

```svelte
<div>
  <ToolsHeader />
</div>
```

## Documentation

# ToolsHeader

The `ToolsHeader` component adds a header with the Reuters Graphics logo for internal tooling sites.

> **Note:** Don't use this component for public pages.

```svelte
<script>
  import { ToolsHeader } from '@reuters-graphics/graphics-components';
</script>

<ToolsHeader>
  <!-- Anything else goes to the right of the logo -->
</ToolsHeader>
```