Section Divider
A collection of SVG section dividers.
Projects /
Projects /
A collection of SVG section dividers.
The Section Divider component is used to add a creative separator between two sections.
The divider element itself 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.has-section-dividers → 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 <path>.
Here's an example:
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.
You can choose where the divider is displayed by either using the .has-section-divider-top or the .has-section-divider-bottom class.
If you use the .has-section-dividers class, remember to duplicate the .section-divider element:
<section class="has-section-dividers">
<div class="padding-y-xxl">
<!-- content -->
</div>
<div class="section-divider">
<!-- <svg></svg> -->
</div>
<div class="section-divider">
<!-- <svg></svg> -->
</div>
</section>
