@empathyco/x-components/docs/API-reference/api/x-components.banner.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Banner](./x-components.banner.md)

## Banner variable

. A banner result is just an item that has been inserted into the search results to advertise something. Usually it is the first item in the grid or it can be placed in the middle of them and fill the whole row where appears. The banner may be clickable or non-clickable depending on whether it has an associated URL or not. It contains an image and, optionally, a title. In case the image does not load due to an error the banner will not be rendered.

Additionally, this component exposes the following props to modify the classes of the elements: `titleClass`<!-- -->.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    banner: {
        type: PropType<BannerModel>;
        required: true;
    };
    titleClass: StringConstructor;
}, {
    imageFailed: import("vue").Ref<boolean>;
    anchorEvents: () => Partial<{ [key in keyof GlobalEventHandlersEventMap]: () => void; }>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    banner: {
        type: PropType<BannerModel>;
        required: true;
    };
    titleClass: StringConstructor;
}>>, {}, {}>
```