Separator

Visitors use it as a quiet break between topics. Content authors add it where whitespace alone does not separate ideas enough. Visual designers pick weight and style so it supports the layout without stealing attention. The rule is decorative; meaning stays in nearby headings and copy.

• The line does not carry semantics on its own; headings and copy introduce each section.
• In edit mode the component may show extra chrome so authors can see it on the canvas.

1. Outer wrapper for spacing and style modifiers.
2. Horizontal rule drawn for sighted users only.

Replace with standard and subtle variants.

• Authors pick separator style and optional CSS class in the dialog.

Do

• Use consistent separator weight across a page or template.
• Pair with sufficient vertical spacing from parent layout components.

Don't

• Don't rely on the separator for semantic structure; screen readers treat this rule as decorative in implementation.
• Don't place a separator between every paragraph; it creates visual noise.

• Between sections where whitespace alone is not enough.
• Inside cards or columns to divide stacked blocks without adding headings.

• As the only heading substitute; use real headings for structure.