Flowing Pages with Curved Dividers

Learn how to create a page with flowing dividers using svg graphics.

If you want to create a flowing page with svg dividers you can use the swoosh_section shortcode. Swoosh sections are full-width blocks with optional curved or graphical SVG dividers between them.

You can use these shortcodes to build flowing pages that alternate white and colored bands. The default colors that are created for this theme are light purple and pale green following pyOpenSci’s purple and green theme colors.

Each section spans the full viewport width by default; content inside is constrained in a centered column (max-width 1280px). You can add markdown, shortcodes, or raw HTML (including <div> wrappers) to the shortcode.

On docs pages use layout="docs" so the section stays within the content area and does not bleed into the left sidebar. Omit it for full-width (e.g. blog, single). See full-width examples on the blog.

Add a purple section with a bottom divider

You add the shortcode to your page like this, specifying whether it’s a top or bottom divider:

{{< swoosh_section background="purple" swoosh="bottom" >}}
Your flowing content here!
{{< /swoosh_section >}}

You can modify the divider background color and position the swoosh at the top or bottom of the section by changing the background and swoosh parameters.

Add a green section with a top divider

For example, to create a green section with a swoosh at the top, use:

{{< swoosh_section background="green" swoosh="top" >}}
Green background with a swoosh at the top.
{{< /swoosh_section >}}

Shortcode parameters: swoosh_section

A the flowing block shortcode parameter cheat sheet:

Parameters

Contained width on docs pages

On documentation pages (with a left sidebar), add layout="docs" so the section stays within the content column and does not bleed into the sidebar. Omit layout for full viewport width (e.g. blog, single).

Usage

{{< swoosh_section background="purple" swoosh="bottom" layout="docs" >}}
Your content here. You can use **markdown**, shortcodes, or raw HTML.
{{< /swoosh_section >}}

Flow pattern

• White section (no swoosh) → purple section with swoosh="bottom" → white section → purple section with swoosh="top" and swoosh="bottom" → etc. The divider’s fill matches the section’s background (purple or green).

Example on this page (contained width)

The content below uses layout="docs" so sections stay in the content column. For full-width examples (blog, single), see How to add flowing dividers.