1 min read

Banner

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>