Page Layout Component

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:

Example Schema

{
  "$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"
    }
  }
}

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

Getting Started

Code Examples

Category Components

Categories

Overview

Properties

Used in Categories

Example Schema

Notes

​Overview

​Properties

​Used in Categories

​Example Schema

​Notes

Overview

Properties

Used in Categories

Example Schema

Notes