Divider/V1

Horizontal separator lines for visual content separation.

Basic Structure

JSON

{
  "type": "Divider/V1",
  "id": "6Z-DivEx-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": { "margin-top": 30 }
  },
  "params": {
    "margin-top--unit": "px"
  },
  "selectors": {
    ".elDivider": {
      "attrs": {
        "style": { "width": 100 }
      },
      "params": {
        "width--unit": "%",
        "--style-border-top-width": 1,
        "--style-border-top-width--unit": "px",
        "--style-border-style": "solid",
        "--style-border-color": "#e2e8f0"
      }
    }
  }
}

Properties

Property	Description	Example
`width`	Width of the divider	`100` (with `%` unit)
`--style-border-top-width`	Line thickness	`1`, `2`, `3`
`--style-border-style`	Line style	`solid`, `dashed`, `dotted`
`--style-border-color`	Line color	`#e2e8f0`

Border Styles

Solid Line

JSON

{
  "params": {
    "--style-border-style": "solid",
    "--style-border-top-width": 1,
    "--style-border-color": "#cbd5e1"
  }
}

Dashed Line

JSON

{
  "params": {
    "--style-border-style": "dashed",
    "--style-border-top-width": 2,
    "--style-border-color": "#94a3b8"
  }
}

Dotted Line

JSON

{
  "params": {
    "--style-border-style": "dotted",
    "--style-border-top-width": 2,
    "--style-border-color": "#64748b"
  }
}

Partial Width Divider

JSON

{
  "selectors": {
    ".elDivider": {
      "attrs": {
        "style": { "width": 50 }
      },
      "params": {
        "width--unit": "%"
      }
    }
  }
}

Supported Features

Feature	Supported
Background	No
Border	Yes
Shadow	Yes
Corners	No