Skip to main content

​
Overview

The Design Info Component standardizes visual styling for sections across QR Code landing pages — such as headers, descriptions, or content blocks.
It ensures that visual elements like background color, borders, and spacing remain consistent with the overall brand theme. This component is commonly used in categories that require rich content presentation and uniform styling: ✅ Used in: Business Card, Feedback, and Restaurant

​
Properties

  • color (object)
    • primary (string) - pattern: ^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$... - primary text color
    • secondary (string) - pattern: ^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$... - secondary text color
    • background (object)
    • primaryText (string) - pattern: ^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$... - title text color
    • secondaryText (string) - pattern: ^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$... - secondary text color
  • fontFamily (string) - font family of text
  • fontSize (object)
    • name (number) - font size of name
  • floatingContactButton (boolean) - contact button is floating or not
  • backgroundImage (object)
    • isSolid (boolean) (required) - To check background has image or solid color
    • value (string) (required) - Value can be color or image url

​
Example Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {},
  "title": "design info schema",
  "description": "design info schema of business card",
  "type": "object",
  "properties": {
    "color": {
      "type": "object",
      "required": [],
      "additionalProperties": false,
      "properties": {
        "primary": {
          "type": "string",
          "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
          "description": "primary text color"
        },
        "secondary": {
          "type": "string",
          "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
          "description": "secondary text color"
        },
        "background": {
          "oneOf": [
            {
              "type": "string",
              "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
              "description": "background color"
            },
            {
              "type": "object",
              "properties": {
                "gradientStyle": {
                  "type": "string",
                  "description": "gradient style, e.g., horizontal, vertical, diagonal, radial"
                },
                "startColor": {
                  "type": "string",
                  "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
                  "description": "starting color of the gradient"
                },
                "endColor": {
                  "type": "string",
                  "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
                  "description": "ending color of the gradient"
                }
              },
              "additionalProperties": false,
              "description": "background as a gradient object"
            }
          ]
        },
        "primaryText": {
          "type": "string",
          "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
          "description": "title text color"
        },
        "secondaryText": {
          "type": "string",
          "pattern": "^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$",
          "description": "secondary text color"
        }
      }
    },
    "fontFamily": {
      "type": "string",
      "description": "font family of text"
    },
    "fontSize": {
      "type": "object",
      "required": [],
      "additionalProperties": false,
      "properties": {
        "name": {
          "type": "number",
          "description": "font size of name"
        }
      }
    },
    "floatingContactButton": {
      "type": "boolean",
      "description": "contact button is floating or not"
    },
    "backgroundImage": {
      "type": "object",
      "required": [
        "isSolid",
        "value"
      ],
      "additionalProperties": false,
      "properties": {
        "isSolid": {
          "type": "boolean",
          "description": "To check background has image or solid color"
        },
        "value": {
          "type": "string",
          "description": "Value can be color or image url"
        }
      }
    }
  }
}