@empathyco/x-components
Version:
Empathy X Components
72 lines (52 loc) • 1.72 kB
Markdown
---
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 emits the following event:
- [`UserClickedABanner`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
emitted when the user clicks the banner (if it has a URL).
## See it in action
In this example, banner data is passed as a prop.
_Here you can see how the `Banner` component is rendered._
```vue
<template>
<Banner :banner="banner" />
</template>
<script setup>
import { Banner } from "@empathyco/x-components/search";
import { ref } from "vue";
const banner = ref({
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 setup>
import { Banner } from "@empathyco/x-components/search";
import { ref } from "vue";
const banner = ref({
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>
```