Media and decoration

Separator

The Separator block draws a horizontal line between blocks. You find it in the Content group of the block picker. It goes in a Section, a Dialog or a Post Content section, or inside a Group, a Collection, a No Results or a Paywall.

Heading About the journal over a thin gray line across the column, with a paragraph about the journal below it

The line takes the border color of your color scheme. To change its color, add a Custom CSS rule in the Advanced settings, such as &, &::before { border-color: #c8102e; }. In a post's own text, use the divider card of the Ghost editor instead.

General

Setting What it does
Style Solid (the default), Dashed or Dotted.
Line length Full (the default) runs the line across its column. Medium stops at 448 px and Small at 320 px. Edge to edge runs it across the whole section, past the section's content width.
Alignment Shows when Line length is Medium or Small. Places the short line on the Left (the default), in the Center or on the Right.
Thickness Thin (1 px), Normal (2 px, the default), Medium (3 px) or Thick (4 px).
Spacing The space above and below the line: None, Small (8 px), Medium (16 px, the default) or Large (32 px).

The Decoration group of the Blocks panel holds the Separator's variants, Solid, Dashed and Dotted in a new project. Each one sets the Style and the Thickness. When the Separator's panel shows Variant at the top, pick one there. How block variants and formats work explains variants.

Shared settings

The Separator also has Width from the Layout settings, the Display settings and the Advanced settings.

Was this article helpful?