Pineapple Builder

Divider

Separate adjacent content with a horizontal or vertical line.

Code name: Divider · Category: Layout

Registered in the live renderer. Website context and the limitations below still apply.

When to use it

Use a divider between related groups, such as a service summary and its details. Use headings and spacing for larger changes in topic.

In the editor

  1. Place the divider between the content groups.
  2. Choose its orientation.
  3. Adjust line dimensions, colour and surrounding spacing.

Example

This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.

<Divider orientation="horizontal" />

Behaviour and limitations

  • A divider is visual separation, not a heading or navigation element.

Property reference

Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.

PropertyEditor value typeDefault evidenceGuidance
spacingobjectNot declared hereAn object of spacing settings. Preserve existing responsive values when changing a single setting.
backgroundColorstringNot declared hereBackground colour. Theme-derived appearance can still depend on the surrounding section.
widthnumber100 (renderer)Length (%). See the usage notes for this block.
heightnumber3 (renderer)Thickness. See the usage notes for this block.
align"left", "center", "right""center" (renderer)Align. See the usage notes for this block.
orientation"horizontal", "vertical""horizontal" (renderer)Orientation. See the usage notes for this block.
screenListstring"" (renderer)Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none.
cssstringNot declared hereCustom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits.
Pineapple Builder - AI Website Builder Create Docs