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

# Design Info Component

> Defines and validates the visual design configuration of a QR Code or landing page section. This component controls QR Code appearance, background colors, gradients, and layout alignment.

## 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](/guides/category-components/categories/businessCard), Feedback, and [Restaurant](/guides/category-components/categories/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

<CodeGroup>
  ```json Schema theme={null}
  {
    "$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"
          }
        }
      }
    }
  }
  ```
</CodeGroup>