Separators

Separators draw horizontal lines to visually divide sections of content. They are also used in headers and footers to separate the repeating area from the page body.

Structure

{
  "separator": {
    "lineType": "SOLID",
    "length": 500,
    "width": 1,
    "color": "#000000"
  }
}

Properties

Property	Type	Required	Default	Description
lineType	string	No	"SOLID"	Line style: SOLID, DASHED, or DOTTED
length	number	No	Full width	Line length in points. Omit to span the full content width (page width minus side margins).
width	number	No	1	Line thickness in points
color	string	No	"#000000"	Line color as hex string

All properties are optional. At minimum, provide lineType or color to render a separator:

{ "separator": { "lineType": "DASHED" } }

This draws a dashed black line, 1pt thick, spanning the full content width.

{ "separator": { "color": "#0063B1" } }

This draws a solid blue line, 1pt thick, spanning the full content width.

Line types

Solid

A continuous, unbroken line.

{
  "separator": {
    "lineType": "SOLID",
    "length": 500,
    "width": 1,
    "color": "#333333"
  }
}

Dashed

A line made of evenly spaced dashes.

{
  "separator": {
    "lineType": "DASHED",
    "length": 500,
    "width": 1,
    "color": "#999999"
  }
}

Dotted

A line made of evenly spaced dots.

{
  "separator": {
    "lineType": "DOTTED",
    "length": 500,
    "width": 0.5,
    "color": "#CCCCCC"
  }
}

Examples

Thick section divider

{
  "separator": {
    "lineType": "SOLID",
    "length": 500,
    "width": 2,
    "color": "#1A1A2E"
  }
}

Subtle content break

{
  "separator": {
    "lineType": "DOTTED",
    "length": 300,
    "width": 0.5,
    "color": "#DDDDDD"
  }
}

Branded accent line

{
  "separator": {
    "lineType": "SOLID",
    "length": 500,
    "width": 3,
    "color": "#0063B1"
  }
}

Full document example

{
  "document": {
    "styles": {
      "h2": { "fontSize": 16, "bold": true, "fontColor": "#1A1A2E" },
      "body": { "fontSize": 10, "fontColor": "#333333" }
    },
    "content": [
      { "p": "Section One", "style": "h2" },
      { "p": "Content for the first section.", "style": "body" },
      {
        "separator": {
          "lineType": "SOLID",
          "length": 500,
          "width": 1,
          "color": "#CCCCCC"
        }
      },
      { "p": "Section Two", "style": "h2" },
      { "p": "Content for the second section.", "style": "body" },
      {
        "separator": {
          "lineType": "DASHED",
          "length": 500,
          "width": 0.5,
          "color": "#DDDDDD"
        }
      },
      { "p": "Section Three", "style": "h2" },
      { "p": "Content for the third section.", "style": "body" }
    ]
  }
}