Dividers

Use our custom dividers to divide sections or elements.

Borders

<!-- Simple -->
<hr class="my-8" />

<!-- Double -->
<hr class="double my-8" />

<!-- Icon -->
<div class="divider-icon my-8"><i class="uil uil-heart"></i></div>

Angles

imageLower Start
imageLower End
imageUpper Start
imageUpper End
imageUpper End & Lower Start
imageUpper Start & Lower End
imageUpper Start & Lower Start
imageUpper End & Lower End
<!-- Lower Start -->
<section class="wrapper !bg-[#edf2fc] angled lower-start"></section>
 
<!-- Lower End --> 
<section class="wrapper !bg-[#edf2fc] angled lower-end"></section>
 
<!-- Upper Start --> 
<section class="wrapper !bg-[#edf2fc] angled upper-start"></section>

<!-- Upper End -->
<section class="wrapper !bg-[#edf2fc] angled upper-end"></section>

<!-- Upper End & Lower Start -->
<section class="wrapper !bg-[#edf2fc] angled upper-end lower-start"></section>

<!-- Upper Start & Lower End -->
<section class="wrapper !bg-[#edf2fc] angled upper-start lower-end"></section>

<!-- Upper Start & Lower Start -->
<section class="wrapper !bg-[#edf2fc] angled upper-start lower-start"></section>

<!-- Upper End & Lower End -->
<section class="wrapper !bg-[#edf2fc] angled upper-end lower-end"></section>

Waves

Wave 1

Wave 2

Wave 3

Wave 4

Wave 5

<!-- Wave 1 -->
<div class="overflow-hidden">
  <div class="divider text-white mx-[-0.5rem]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 70"><path fill="currentColor" d="M1440,70H0V45.16a5762.49,5762.49,0,0,1,1440,0Z"/></svg>
  </div>
</div>
<!-- /.overflow-hidden -->
    
<!-- Wave 2 -->
<div class="overflow-hidden">
  <div class="divider text-white mx-[-0.5rem]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60"><path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"/></svg>
  </div>
</div>
<!-- /.overflow-hidden -->
    
<!-- Wave 3 -->
<div class="overflow-hidden">
  <div class="divider text-white mx-[-0.5rem]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 92.26"><path fill="currentColor" d="M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z"/></svg>
  </div>
</div>
<!-- /.overflow-hidden -->
    
<!-- Wave 4 -->
<div class="overflow-hidden">
  <div class="divider text-white mx-[-0.5rem]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="currentColor" d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z"/></svg>
  </div>
</div>
<!-- /.overflow-hidden -->
    
<!-- Wave 5 -->
<div class="overflow-hidden">
  <div class="divider text-white mx-[-0.5rem]">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="currentColor" d="M1260.2,37.86c-60-10-120-20.07-180-16.76-60,3.71-120,19.77-180,18.47-60-1.71-120-21.78-180-31.82s-120-10-180-1.7c-60,8.73-120,24.79-180,28.5-60,3.31-120-6.73-180-11.74s-120-5-150-5H0V100H1440V49.63C1380.07,57.9,1320.13,47.88,1260.2,37.86Z"/></svg>
  </div>
</div>
<!-- /.overflow-hidden -->

Vertical

Start
End 
<!-- Start -->
<section class="wrapper  bg-[rgba(246,247,249,1)]  !relative min-h-[60vh] lg:flex items-center mb-10">
  <div class="lg:w-6/12 flex-[0_0_auto] px-[15px] max-w-full lg:!absolute top-0  !right-0 image-wrapper bg-image bg-cover !h-full" data-image-src="./assets/img/photos/bg39.jpg">
    <div class="divider text-[#f6f7f9] divider-v-start hidden  lg:block">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 1200"><g /><g><g><polygon fill="currentColor" points="6 0 0 0 0 1200 6 1200 54 0 6 0"/></g></g></svg>
    </div>
  </div>
  <!--/column -->
  <div class="container">
    <div class="row mx-0">
      <div class="lg:w-6/12 flex-[0_0_auto] px-[15px] max-w-full">
        <div class="pt-[4.5rem] pb-20 xl:pb-28 lg:pb-28 md:pb-28 lg:!py-24 xl:pr-20 lg:pr-20 !relative">
          Content here
        </div>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->


<!-- End -->
<section class="wrapper  bg-[rgba(246,247,249,1)]  !relative min-h-[60vh] lg:flex items-center">
<div class="lg:w-6/12 flex-[0_0_auto] px-[15px] max-w-full lg:!absolute top-0 start-0 image-wrapper bg-image bg-cover !h-full" data-image-src="./assets/img/photos/bg38.jpg">
  <div class="divider text-[#f6f7f9] divider-v-end hidden  lg:block">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 1200"><g/><g><g><polygon fill="currentColor" points="48 0 0 0 48 1200 54 1200 54 0 48 0"/></g></g></svg>
  </div>
</div>
<!--/column -->
<div class="container">
  <div class="row mx-0">
    <div class="lg:w-6/12 flex-[0_0_auto] px-[15px] max-w-full ml-auto">
      <div class="pt-[4.5rem] pb-20 xl:pb-28 lg:pb-28 md:pb-28 lg:!py-24 lg:!pl-20 xxl:!pr-24 !relative">
        Content Here
      </div>
    </div>
    <!--/column -->
  </div>
  <!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image