---

title: Banner

---

# Banner

## Props

| Name                    | Description      | Type                     | Default       |
| ----------------------- | ---------------- | ------------------------ | ------------- |
| <code>banner</code>     | The banner data. | <code>BannerModel</code> | <code></code> |
| <code>titleClass</code> |                  | <code>string</code>      | <code></code> |

## Events

This component doesn't emit events.

## See it in action

In this example banned data is passed as a prop.

_Here you can see how the `Banner` component is rendered._

```vue
<template>
  <Banner :banner="banner" />
</template>

<script>
import { Banner } from '@empathyco/x-components/search'
export default {
  name: 'BannerDemo',
  components: {
    Banner,
  },
  data() {
    return {
      banner: {
        modelName: 'Banner',
        id: 'banner-example',
        url: 'https://my-website.com/summer-shirts',
        image: 'https://my-website.com/images/summer-shirts.jpg',
        title: 'Trendy summer shirts',
        position: 1,
      },
    }
  },
}
</script>
```

### Customizing the items with classes

The `titleClass` prop can be used to add classes to the banner title.

```vue
<template>
  <Banner :banner="banner" titleClass="x-bg-neutral-50" />
</template>

<script>
import { Banner } from '@empathyco/x-components/search'
export default {
  name: 'BannerDemo',
  components: {
    Banner,
  },
  data() {
    return {
      banner: {
        modelName: 'Banner',
        id: 'banner-example',
        url: 'https://my-website.com/summer-shirts',
        image: 'https://my-website.com/images/summer-shirts.jpg',
        title: 'Trendy summer shirts',
        position: 1,
      },
    }
  },
}
</script>
```