> ## 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.

# Page Layout Component

> Defines the layout styling for a QR Code landing page, including background color and image configuration. Used across multiple categories to maintain consistent design and branding.

## Overview

The **Page Layout Component** controls the **visual appearance** of a QR Code landing page.\
It allows configuration of **background colors**, **images**, and **layout behavior** to align with brand identity or event themes.

This component is flexible and reusable — supporting various QR Code categories like **Coupon**, **Event**, **Social Media**, and more.\
It ensures consistent styling across pages while allowing each category to customize its visual theme.

## Properties

| Property                   | Type     | Required | Description                                                                    |
| :------------------------- | :------- | :------- | :----------------------------------------------------------------------------- |
| **backgroundColor**        | `string` | No       | Sets the background color of the page (supports HEX, RGB, or CSS color names). |
| **backgroundImage**        | `string` | No       | URL of the background image. Supports `.png`, `.jpg`, `.jpeg`, `.svg`, `.gif`. |
| **backgroundImageSetting** | `string` | No       | Controls background image behavior (e.g., `cover`, `contain`, or `repeat`).    |

## Used in Categories

This component is used in the following 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)
* [Social Media](/guides/category-components/categories/sMedia)
* [Wedding](/guides/category-components/categories/wedding)

## Example Schema

<CodeGroup>
  ```json Schema theme={null}
  {
    "$schema": "http://json-schema.org/draft-07/schema#",
    "definitions": {},
    "title": "Page layout component",
    "description": "Validate page payload component",
    "type": "object",
    "required": [],
    "properties": {
      "backgroundColor": {
        "type": "string"
      },
      "backgroundImage": {
        "type": "string"
      },
      "backgroundImageSetting": {
        "type": "string"
      }
    }
  }
  ```
</CodeGroup>

## Notes

* If **both** `backgroundColor` and `backgroundImage` are provided, the image will take priority.
* Use **light or neutral background colors** for better text readability.
* Always use **optimized background images (\< 1 MB)** to prevent slow page loading.
* Ensure the **background image URL** is publicly accessible (HTTPS recommended).