Skip to main content

​
Overview

The Separator Component provides a simple, reusable way to visually separate different content blocks — such as event details, guest information, or RSVP sections — within QR Code landing pages. It includes predefined separator styles (e.g., lines, icons, patterns) and supports custom color styling for better brand consistency or theme alignment. This component ensures clean structure and improved readability, particularly for long or multi-section layouts.

​
Properties

PropertyTypeRequiredDescription
namestring✅ YesIdentifier for the separator style. Supported values: "01" → "09".
colorobjectNoReference to the style object for customizing separator color. Points to style/separator.json#/properties/color.

​
Used in Categories

This component is used in the following categories:

​
Schema

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Separator Component",
  "description": "Reusable Separator component schema",
  "type": "object",
  "additionalProperties": false,
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "enum": [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09"
      ]
    },
    "color": {
      "$ref": "style/separator.json#/properties/color"
    }
  }
}

​
Notes

  • The name field corresponds to a predefined separator design (e.g., floral line, dotted divider, elegant swirl).
  • The color object allows overriding the default design color for theme customization.
  • Ideal for use between large content sections like schedules, maps, or RSVP details.