> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Banner Images Component

> Defines the Banner Images Component used to attach up to three banner images within a category. Ensures all uploaded images meet supported URL formats and file extensions.

## Overview

The **Banner Images Component** allows categories such as **Event**, **Product**, **Coupon**, and **Wedding** QR Codes to display up to **three banner images**.\
Each banner image must be provided as a **valid HTTPS URL** linking to an image file (`.png`, `.jpg`, `.jpeg`, `.svg`, or `.gif`).

This component enforces file type and count limits to maintain layout consistency and prevent performance issues from oversized or unsupported media.

## Properties

| Property   | Type            | Required | Description                                                           |
| :--------- | :-------------- | :------- | :-------------------------------------------------------------------- |
| **images** | `array<object>` | ✅ Yes    | List of image objects to display as banners. Supports up to 3 images. |

### 🖼️ **Image Object**

| Sub-Property | Type     | Required | Description                                                                                    |
| :----------- | :------- | :------- | :--------------------------------------------------------------------------------------------- |
| **url**      | `string` | ✅ Yes    | Direct HTTPS link to the image file. Must end with `.png`, `.jpeg`, `.jpg`, `.svg`, or `.gif`. |

## Validation Rules

* A maximum of **3 images** are allowed.
* Image URLs **must** begin with `https://` or `http://`.
* Supported file extensions: `.png`, `.jpeg`, `.jpg`, `.svg`, `.gif`.
* Invalid or non-image URLs will result in schema validation errors.

***

## Used In Categories

This component is used in the following QR Code categories:

* [Coupon](/guides/category-components/categories/coupon)
* [Dynamic Text](/guides/category-components/categories/dynamicText)
* [Event](/guides/category-components/categories/event)
* [Product](/guides/category-components/categories/product)
* [Wedding](/guides/category-components/categories/wedding)

## Example Schema

<CodeGroup>
  ```json Schema theme={null}
  {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "definitions": {},
    "title": "Banner images component",
    "description": "Validate banner images component",
    "type": "object",
    "required": [
      "images"
    ],
    "additionalProperties": false,
    "properties": {
      "images": {
        "type": "array",
        "additionalProperties": false,
        "maxItems": 3,
        "$comment": "Allows 3 items in the list",
        "items": {
          "type": "object",
          "required": [
            "url"
          ],
          "additionalProperties": false,
          "properties": {
            "url": {
              "type": "string",
              "pattern": "(https?://.*\\.(png|jpeg|jpg|svg|gif|PNG|JPEG|JPG|SVG|GIF))$"
            }
          }
        }
      }
    }
  }
  ```
</CodeGroup>

## Example Usage

```
{
  "images": [
    { "url": "https://cdn.scanova.io/banners/banner1.jpg" },
    { "url": "https://cdn.scanova.io/banners/banner2.png" },
    { "url": "https://cdn.scanova.io/banners/banner3.svg" }
  ]
}
```

## Notes

* Recommended image aspect ratio: **16:9** for best display across devices.
* File size should be optimized (preferably \<1MB per image) to maintain fast page load times.
* Supports up to **3 banners** to prevent layout overflow or distortion.