Skip to main content

Use visual separators to organise content

Use horizontal or vertical separators to visually divide sections of a page so complex information is easier to scan and understand.

Audience

This guide is designed for project manager.

Steps​

Step 1: Identify where separation will help readability​

Review your page layout and decide which areas would benefit from a clear visual break, such as between summaries, detail sections, or different functional blocks.

Identify where separation will help readability

Step 2: Insert a horizontal separator between sections​

Place a horizontal separator between two content blocks to show they belong to different sections while still appearing as part of the same page.

Insert a horizontal separator between sections

Step 3: Use vertical separators in toolbars or side-by-side content​

When items are arranged horizontally, add a vertical separator between groups of controls or columns to make each group easier to distinguish.

Use vertical separators in toolbars or side-by-side content

Step 4: Check visual consistency across the page​

Ensure separators use consistent spacing and orientation so the page looks cohesive and users can quickly recognise how content is grouped.

Check visual consistency across the page

Last updated: 2026-09-01