@empathyco/x-components
Version:
Empathy X Components
79 lines (57 loc) • 2.15 kB
Markdown
---
title: Promoted
---
# Promoted
A promoted result is just an item that has been inserted into the search results to advertise
something. Usually it is one of the first items in the grid, and has the same shape as a
result. It just contains a link to the promoted content, an image, and a title.
Additionally, this component exposes the following props to modify the classes of the
elements: `titleClass`.
## Props
| Name | Description | Type | Default |
| ----------------------- | ------------------ | -------------------------- | ------------- |
| <code>promoted</code> | The promoted data. | <code>PromotedModel</code> | <code></code> |
| <code>titleClass</code> | | <code>string</code> | <code></code> |
## Events
This component emits the following event:
- [`UserClickedAPromoted`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
emitted when the user clicks the promoted item (if it has a URL).
## See it in action
In this example, promoted data is passed as a prop.
_Here you can see how the `Promoted` component is rendered._
```vue
<template>
<Promoted :promoted="promoted" />
</template>
<script setup>
import { Promoted } from "@empathyco/x-components/search";
import { ref } from "vue";
const promoted = ref({
modelName: "Promoted",
id: "promoted-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 promoted title.
```vue
<template>
<Promoted :promoted="promoted" titleClass="x-bg-neutral-50" />
</template>
<script setup>
import { Promoted } from "@empathyco/x-components/search";
import { ref } from "vue";
const promoted = ref({
modelName: "Promoted",
id: "promoted-example",
url: "https://my-website.com/summer-shirts",
image: "https://my-website.com/images/summer-shirts.jpg",
title: "Trendy summer shirts",
position: 1,
});
</script>
```