Banner

Props

Name	Description	Type	Default
banner	The banner data.	BannerModel

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.

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

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