@empathyco/x-components
Version:
Empathy X Components
94 lines (73 loc) • 2.19 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 doesn't emit events.
## 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>
import { Promoted } from '@empathyco/x-components/search'
export default {
name: 'PromotedDemo',
components: {
Promoted,
},
data() {
return {
promoted: {
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>
import { Promoted } from '@empathyco/x-components/search'
export default {
name: 'PromotedDemo',
components: {
Promoted,
},
data() {
return {
promoted: {
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>
```