🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Section Divider

A collection of SVG section dividers.

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

How to

The Section Divider component is used to add a creative separator between two sections.

The divider element itself (.section-divider) is an inline SVG element. It's injected as inline code to support color themes.

The section containing the divider can have one of the following classes:

  • .has-section-divider-bottom -> The divider is displayed at the bottom of the section
  • .has-section-divider-top -> The divider is displayed at the top of the section
  • .section-divider -> The dividers are displayed on both sides of the section. They can be the same divider or two different SVG elements.

⚠️ Don't apply padding (e.g., using padding utility classes) to the <section> element. Use an inner element instead, as in the demo.

Theming #

The SVG divider (.section-divider) works as a mask. It needs to have the same background color of the adjacent section (not the one of the section it is applied to).

If you set a background-color for the adjacent section using data-theme (or applying a bg utility class), make sure to set the same background color on the SVG <path> of the divider. For example, you can apply the same data-theme to the adjacent section and the SVG divider <path>.

Here's an example:

Background Image #

The SVG divider works with background images as well. Check this demo example where we apply a background-image to the <section> element, along with the .bg-cover and .bg-center utility classes of the framework.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us