Banner

Props

Name	Description	Type	Default
banner	The banner data.	BannerModel
titleClass		string

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>