Separator

Overview

The Separator block introduces a clear and customizable break between groups of content. By controlling spacing, line style, and color, you create subtle or bold visual divisions that improve structure and navigation. This block helps visitors scan and understand your pages, making key information easier to find.

💡 Tip: Add the Separator block to create visual hierarchy, direct attention, and break up dense content.

⚠️ Important: Thoughtful use of the Separator block makes layouts cleaner and more reader-friendly, providing intentional and consistent division between sections.

Key components and functionality

Spacer and line settings

Spacer and line settings allow you to tailor the appearance of the Separator block for both desktop and mobile. Careful adjustment of these options keeps your content visually balanced and organized across all devices.

Height (desktop)

Set the vertical space allocated to the separator on desktop screens.

1. Adjustable from 0 to 160 px, in 4 px increments.

2. The default value is 64 px.

3. Larger heights create a stronger separation between sections.

4. Smaller heights deliver subtle distinction without excessive whitespace.

Height (mobile)

Adjust the vertical space for the separator on mobile devices.

1. Adjustable from 0 to 160 px, in 4 px increments.

2. The default value is 32 px.

3. Optimized to prevent clutter or excessive gaps on smaller screens.

Line style

Choose how the separator line appears, or remove it entirely to leave only spacing.

1. Dashed — Produces a dashed line for a relaxed, contemporary feel.

2. Dotted — Displays a dotted line for light emphasis.

3. Solid — A continuous line, which is the default choice and offers a classic look. The default is Solid.

4. None — No line at all, making the separator function as pure whitespace.

Separator color

Choose the line’s color to match your branding, boost contrast, or create subtle transitions.

1. Strong contrast ensures maximum accessibility.

2. Harmonious colors keep visual separation soft or minimal.

3. If the Line style is set to None, no color will appear.

📝 Note: For best results, compare your separator color directly against your section or page background to ensure the separator is clear and accessible.

Visibility settings

Visibility controls determine if the Separator block appears on desktop, mobile, or both. Adjust these settings to streamline your design and adapt the layout for different devices.

1. Do not hide — Shows the separator across all devices. The default is Do not hide.

2. Hide on desktop — Hides the separator for users on larger screens.

3. Hide on mobile — Hides the separator for visitors viewing on phones and small screens.

💡 Tip: Fine-tune device-specific visibility to reduce clutter and optimize the content flow for each platform.

⚠️ Important: Consistent and thoughtful visibility settings help keep your content structured and easy to navigate everywhere.

Available in sections

The Separator block can be used in the following sections:

1. Footer navigation

2. Product information

3. Hero

Usage notes

Adjust the separator height to set the right pace in your layouts — use taller values for strong visual breaks and shorter ones for gentle spacing. Line styles draw attention: a solid line emphasizes division, while no line merely shapes the flow of content without any visual cue. Always pick a separator color that meets contrast requirements for accessibility. Device-specific visibility settings let you control clutter and ensure a polished, adaptable browsing experience.

Used thoughtfully, the Separator block brings structure, simplicity, and polish, turning each page into a more intentional and navigable experience.