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

# Separator Component

> Defines a reusable visual divider for organizing content sections within landing pages. Commonly used in Wedding category designs for aesthetic separation between elements.

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

| Property  | Type     | Required | Description                                                                                                        |
| :-------- | :------- | :------- | :----------------------------------------------------------------------------------------------------------------- |
| **name**  | `string` | ✅ Yes    | Identifier for the separator style. Supported values: `"01"` → `"09"`.                                             |
| **color** | `object` | No       | Reference 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:

* [Wedding](/guides/category-components/categories/wedding)

## Schema

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

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