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

Projects

Progress value is 30%

Section Divider

A collection of SVG section dividers.

View Demo

Dependencies

All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How to

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.

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.

Divider Side #

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>

✅ Project duplicated

✅ Project created

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