Banner

Props

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

Events

This component emits the following event:

• UserClickedABanner (opens new window): emitted when the user clicks the banner (if it has a URL).

Examples

In this example, banner data is passed as a prop.

<template>
  <Banner :banner="banner" />
</template>
<script setup>
import { Banner } from '@empathyco/x-components/search'
import { ref } from 'vue'
const banner = ref({
  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 setup>
import { Banner } from '@empathyco/x-components/search'
import { ref } from 'vue'
const banner = ref({
  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>