Section Divider

A simple spacing module that inserts vertical whitespace between page sections. Content editors choose from four height presets and can optionally display a horizontal divider line with a custom colour. The background is also configurable, making it useful as a visual break or colour transition between sections.

Adding in Strapi

1. Go to Content Manager > Pages > select your page
2. In the Design dynamic zone, click "Add component"
3. Select "Dynamic" > "Section Divider"
4. Choose a height preset, toggle the line visibility, and optionally set a line colour and background
5. Save and publish

Fields Reference

Variants

Default

A medium-height transparent spacer with no visible line. Provides clean vertical separation between adjacent sections.

WithLine

Adds a horizontal line across the centre of the spacer. The line colour is configurable -- use it to create a subtle visual break that matches your page's colour scheme.

LargeSize

An extra-large spacer that creates a significant visual gap between sections. Useful for separating major content areas or creating breathing room on long pages.

Tips

• Use SM for tight spacing between related sections (e.g. between a heading module and a content module).
• Use MD (the default) as a general-purpose separator between most sections.
• Use LG or XL to create dramatic breathing room before hero sections or calls to action.
• When using a line, set the lineColor to match or complement your page's accent colour for a polished look.
• Combine a coloured background with showLine: false to create a colour-block transition between sections with different background colours.