Section break

The section break is a horizontal grey line that visually separates distinct blocks of content within a page.

It creates clear divisions between topics or sections without requiring additional headings, helping users scan content and understand content structure.

Use section breaks when you need subtle visual separation that supports content flow rather than interrupting it.

Use section breaks when you need to:

• separate related content sections that don’t require their own headings
• divide content into logical groups within longer pages
• create visual separation between different types of content (such as separating introductory text from detailed content)
• indicate transitions between topics within the same section
• separate grouped elements like multiple forms, lists, or content blocks
• provide visual breathing space in dense content areas

Don’t use section breaks when other structural elements work better.

Use headings instead when:

• content sections have distinct topics that benefit from descriptive labels
• users need to navigate directly to specific sections
• content hierarchy requires clear structural markers

Avoid section breaks when:

• content is already clearly separated by headings or other components
• overuse would create visual clutter or interrupt content flow
• logical content flow would be disrupted by visual separation
• users need to read content continuously without interruption

Use section breaks strategically to support content structure and user understanding.

Position section breaks where they improve rather than disrupt content flow:

• place breaks between related but distinct content groups
• use sparingly to maintain effectiveness and avoid visual clutter
• ensure breaks support logical content organization rather than arbitrary division
• consider whether content would be clearer with headings instead of breaks

Structure content around section breaks thoughtfully:

• group related information before and after breaks
• ensure each section contains substantial enough content to justify separation
• maintain logical flow even with visual separation
• avoid creating very short sections that feel disconnected

Consider whether other structural elements might work better:

• use proper heading hierarchy for content that needs navigation or clear labeling
• consider layout solutions like spacing or typography changes for subtle separation
• evaluate whether content grouping serves user needs or just visual preferences