A collection of SVG section dividers.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
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.
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
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.