# Header

The `Header` component provides a header section with a title and optional children components.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Fc1FDhghGrAlyeP26j7x7%2Fheader.png?alt=media&#x26;token=fbadd076-0620-4343-a2e2-54090155d46c" alt="Gravity header component" width="563"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Header } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <Header title='My View Title'>
      <p>Optional content goes here.</p>
    </Header>
  );
}
```

### Props

| Prop     | Description        | Required | Value        |
| -------- | ------------------ | -------- | ------------ |
| children | children to render | optional | component(s) |
| title    | title of the view  | required | string       |

### Notes

* The `title` prop provides the title for the header section.
* The `children` prop allows for rendering additional components within the header.