# Banner

The `<Banner>` tag can be used to create site banners. To create your own banner component, simply create a new component and use the `<Banner>` tag as the outer wrapper for the component. (This should replace the `<Section>` tag as the outermost wrapper.)

```jsx
<Banner dataRef={content.banner}>
...
</Banner>
```

### Attributes

* **className**: string (optional) - A hard-coded class name to add to the rendered element
* **dataRef**: DataLocator - The data-element storing the Section's configuration
* **location**: Array\<string> (optional) - Where the component can appear; can include `'header'`, `'main'`, and `'footer'` (Default: `['main']`)
* **properties**: Array<\[object]> (optional) - Define properties that content authors can configure within the page editor. For details see [custom properties](https://developer.unstack.com/docs/features/properties).