Divider Block

Divider creates a deliberate visual pause between related sections without adding another heading or decorative image. The live block above uses the standard horizontal divider documented below.

Properties

Properties defines the divider’s direction, line treatment, thickness, color, opacity, and inline container size. Set the structural role first, then refine its visual weight.

Orientation

Horizontal creates a separator across the available width. Vertical creates an upright rule and is most useful in a grid composition with enough authored height.

Style

Solid, dashed, dotted, and double are restrained structural options; gradient, zigzag, wave, and curve are more decorative and should support the page’s visual language.

Thickness, Color, and Opacity

Thickness ranges from 1 to 10 pixels. Color accepts theme or custom values, while Opacity ranges from transparent to opaque. Tune them together so the rule remains visible but subordinate.

Container Size

When Divider is used directly in inline content, Small, Medium, and Large create 24, 48, or 80 pixel slots. In a section grid, the authored grid frame controls the area.

Layout

Keep a horizontal divider wide and only one row tall. Give a vertical divider the height of the content it separates, avoid overlap, and keep one free row at the end of its section.

Behavior

Divider is decorative and has no visitor interaction. Orientation changes geometry only; it does not create a semantic section boundary or change reading order.

Style Panel

The Style Panel exposes the Block area for spacing, background, borders, and effects around the line. Use Properties for the divider itself and the Style Panel only for its surrounding surface.

A divider usually works best on a transparent surface with restrained spacing. Avoid a second border or shadow that competes with the line.

Motion

Divider supports standard entrance effects. Keep None for structural separators; when motion is justified, prefer a short fade or reveal and verify reduced-motion behavior.

Property summary

Orientation — horizontal or vertical geometry.

Style — solid, dashed, dotted, double, gradient, zigzag, wave, or curve.

Thickness — line weight from 1 to 10 px.

Color and Opacity — theme/custom color and transparency.

Container Size — Small, Medium, or Large spacing when used inline.

Responsive behavior

Divider is content-driven and starts from a compact 4-column by 1-row frame. A horizontal divider can span the available width without gaining height.

When adjacent columns stack, change a vertical divider to horizontal or reposition it so it does not become an isolated rule.

Accessibility

• Do not use the line as the only signal that a topic has changed; headings and content order must carry the structure.

• Keep enough contrast for the separator to be perceptible without making it more prominent than nearby text.

• Avoid repeated motion and respect reduced-motion preferences.

Best practices

• Use one divider to clarify a real transition.

• Balance space above and below instead of using an oversized frame.

• Reuse the same treatment for equivalent hierarchy levels.

Common mistakes

• Adding a divider between every block and fragmenting the reading flow.

• Combining a thick line, strong color, shadow, and decorative style without a clear reason.

• Leaving a vertical divider between columns after they stack on mobile.

• Using block height as whitespace instead of keeping the frame content-driven.

Quick recipe

Add Divider to a dedicated section, choose orientation from the layout, select the simplest suitable style, tune thickness, color, and opacity, keep the frame compact, then verify desktop, tablet, and mobile.