Demo Schema

visual.schema.json

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "http://frontend.ruhmesmeile.com/content/molecules/visual.schema.json",
  "title": "Visual",
  "description": "visual",
  "type": "object",
  "properties": {
    "height": {
      "title": "Height",
      "type": "string",
      "enum": ["small", "default", "fullImage", "fullScreen"],
      "default": "default"
    },
    "media": {
      "title": "Media Wrapper",
      "description": "Wrapper for all media types",
      "type": "object",
      "properties": {
        "mode": {
          "title": "Media Type",
          "description": "Choose a media type between image, video and none",
          "type": "string",
          "enum": ["image", "video", "none"],
          "default": "image"
        },
        "image": {
          "title": "Background image",
          "description": "Sources of background images for different screen sizes",
          "type": "object",
          "required": ["srcMobile", "srcTablet", "srcDesktop"],
          "properties": {
            "srcMobile": {
              "title": "Mobile image source",
              "description": "Background image source for small screens",
              "type": "string",
              "format": "image",
              "default": "https://picsum.photos/seed/kdsvisual/640/270"
            },
            "srcTablet": {
              "title": "Tablet image source",
              "description": "Background image source for medium screens",
              "type": "string",
              "format": "image",
              "default": "https://picsum.photos/seed/kdsvisual/1280/540"
            },
            "srcDesktop": {
              "title": "Desktop image source",
              "description": "Background image source for large screens",
              "type": "string",
              "format": "image",
              "default": "https://picsum.photos/seed/kdsvisual/1920/810"
            },
            "src": {
              "title": "Optional source",
              "description": "Override for img tag of picture element, if needed",
              "type": "string",
              "format": "image",
              "default": "https://picsum.photos/seed/kdsvisual/640/270"
            },
            "indent": {
              "title": "Image indent",
              "description": "Choose to indent the image horizontally on small screens",
              "type": "string",
              "enum": ["none", "left", "right"],
              "default": "none"
            },
            "alt": {
              "type": "string",
              "title": "Alt text",
              "description": "Alt text to display for picture"
            }
          }
        },
        "video": {
          "title": "Background video",
          "description": "Sources of background videos for different screen sizes",
          "type": "object",
          "required": ["srcMobile", "srcTablet", "srcDesktop"],
          "properties": {
            "srcMobile": {
              "title": "Mobile video source",
              "description": "Background video source for small screens",
              "type": "string",
              "format": "video",
              "default": "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"
            },
            "srcTablet": {
              "title": "Tablet video source",
              "description": "Background video source for medium screens",
              "type": "string",
              "format": "video",
              "default": "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"
            },
            "srcDesktop": {
              "title": "Desktop video source",
              "description": "Background video source for large screens",
              "type": "string",
              "format": "video",
              "default": "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"
            }
          }
        }
      },
      "additionalProperties": false
    },
    "overlay": {
      "title": "Grid layer",
      "description": "Enable grid layer",
      "type": "boolean",
      "default": false
    },
    "box": {
      "title": "Text box",
      "description": "Content and style configuration for the text box",
      "type": "object",
      "properties": {
        "enabled": {
          "title": "Display box",
          "description": "Toggles visibility of the box",
          "type": "boolean",
          "default": true
        },
        "headline": {
          "title": "Headline",
          "description": "Headline for the box",
          "type": "object",
          "allOf": [
            {
              "$ref": "http://frontend.ruhmesmeile.com/base/molecules/headline.schema.json"
            }
          ],
          "properties": {
            "level": {
              "default": "p"
            },
            "styleAs": {
              "default": "h2"
            },
            "align": {
              "default": null
            },
            "content": {
              "default": "Lorem Ipsum dolor"
            }
          }
        },
        "text": {
          "title": "Text",
          "description": "Text box copy text",
          "type": "string",
          "format": "markdown",
          "default": "Hic maxime sed eos non. Consequatur ut qui amet accusantium nesciunt."
        },
        "link": {
          "title": "Link",
          "description": "Text box link configuration",
          "allOf": [
            {
              "type": "object",
              "properties": {
                "enabled": {
                  "title": "Display Link",
                  "description": "Toggles visibility of the link",
                  "type": "boolean",
                  "default": true
                },
                "variant": {
                  "default": "outline-inverted"
                }
              }
            },
            {
              "$ref": "http://frontend.ruhmesmeile.com/base/atoms/link-button.schema.json"
            }
          ]
        },
        "indent": {
          "title": "Indent",
          "description": "The text box is aligned inside the content grid",
          "type": "boolean",
          "default": false
        },
        "horizontal": {
          "title": "Horizontal orientation",
          "description": "Horizontal orientation of the box inside the keyvisual",
          "type": "string",
          "enum": ["left", "center", "right"],
          "default": "left"
        },
        "vertical": {
          "title": "Vertical orientation",
          "description": "Vertical orientation of the box inside the keyvisual",
          "type": "string",
          "enum": ["top", "center", "bottom"],
          "default": "center"
        },
        "background": {
          "title": "Style of the box",
          "description": "Choose a style for the box",
          "type": "string",
          "enum": ["default", "light", "transparent"],
          "default": "default"
        }
      },
      "additionalProperties": false
    },
    "backgroundColor": {
      "title": "Custom background color",
      "description": "Custom css background color",
      "type": "string",
      "format": "color",
      "examples": ["#000"],
      "default": "#ccc"
    },
    "inbox": {
      "title": "Inbox",
      "description": "The text box is in front of the image on small screens",
      "type": "boolean",
      "default": false
    },
    "skipButton": {
      "title": "Skip Button",
      "description": "Show skip button",
      "type": "boolean",
      "default": false
    },
    "className": {
      "type": "string",
      "title": "Additional Classes"
    }
  },
  "additionalProperties": false
}