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
promoted	The promoted data.	PromotedModel

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.

<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.

<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>