Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Divider

##### Horizontal Solid Divider

Use `divider-body-1` class for linear divider.

Primary
Secondary
Success

    <div class="card-body main-divider">
       <div class="divider-body divider-body-1 divider-primary">
           <div class="divider-p-primary">
               <i class="fa-brands fa-modx me-2 txt-primary f-20"></i>
               <span class="txt-primary">Primary</span>
           </div>
       </div>
       <div class="divider-body divider-body-1 divider-secondary">
           <div class="divider-p-secondary">
               <i class="fa-solid fa-recycle me-2 txt-secondary f-20"></i>
               <span class="txt-secondary">Secondary </span>
           </div>
       </div>
       <div class="divider-body divider-body-1 divider-success">
           <div class="divider-p-success">
               <i class="fa-solid fa-leaf me-2 txt-success f-20"></i>
               <span class="txt-success">Success</span>
           </div>
       </div>
    </div>

##### Horizontal Dashed Divider

Use `divider-body-2` class for dashed divider.

    <div class="card-body main-divider">
       <div class="divider-body divider-body-2 divider-danger">
           <div class="divider-circle bg-light-danger">
               <i class="fa-solid fa-heart txt-danger"></i>
           </div>
       </div>
       <div class="divider-body divider-body-2 divider-warning">
           <div class="divider-circle bg-light-warning">
               <i class="fa-solid fa-star txt-warning"></i>
           </div>
       </div>
       <div class="divider-body divider-body-2 divider-success">
           <div class="divider-circle bg-light-success">
               <i class="fa-solid fa-trophy txt-success"></i>
           </div>
       </div>
    </div>

##### Horizontal Dotted Divider

Use `divider-body-3` class for dotted divider.

Primary
Secondary
Warning
Info
Dark

    <div class="card-body main-divider">
       <div class="divider-body divider-body-3 divider-primary">Primary</div>
       <div class="divider-body divider-body-3 divider-secondary">Secondary</div>
       <div class="divider-body divider-body-3 divider-warning">Warning</div>
       <div class="divider-body divider-body-3 divider-info">Info</div>
       <div class="divider-body divider-body-3 divider-dark">Dark</div>
    </div>

##### Vertical Dashed Divider

Use `vertical-divider` and`vertical-line` class for dashed divider.

Primary

Secondary

Success

    <div class="card-body main-divider">
       <div class="row g-sm-2 d-flex gy-4">
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-primary"></div>
                   <p class="my-2 border border-primary">Primary</p>
                   <div class="vertical-line bg-primary"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-secondary"></div>
                   <p class="my-2 border border-secondary rounded-pill">Secondary</p>
                   <div class="vertical-line bg-secondary"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-warning"></div>
                   <svg class="my-2 stroke-icon stroke-warning">
                       <use href="../assets/svg/icon-sprite.svg#stroke-social"></use>
                   </svg>
                   <div class="vertical-line bg-warning"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-success"></div>
                   <p class="my-2 txt-success">Success</p>
                   <div class="vertical-line bg-success"></div>
               </div>
           </div>
       </div>
    </div>

##### Vertical Dotted Divider

Use `dotted-divider` and`vertical-line` class for dotted divider.

Success

Warning

Dark

    <div class="card-body main-divider">
       <div class="row g-sm-2 d-flex dotted-divider gy-4">
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-success"></div>
                   <p class="my-2 border border-success">Success</p>
                   <div class="vertical-line bg-success"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-warning"></div>
                   <p class="my-2 border border-warning rounded-pill">Warning</p>
                   <div class="vertical-line bg-warning"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-danger"></div>
                   <svg class="my-2 fill-icon fill-danger">
                       <use href="../assets/svg/icon-sprite.svg#fill-starter-kit"></use>
                   </svg>
                   <div class="vertical-line bg-danger"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-dark"></div>
                   <p class="my-2">Dark</p>
                   <div class="vertical-line bg-dark"></div>
               </div>
           </div>
       </div>
    </div>

##### Vertical Double Divider

Use `double-divider` and`vertical-line` class for double divider.

Secondary

Success

Warning

    <div class="card-body main-divider">
       <div class="row g-sm-2 d-flex double-divider gy-4">
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-secondary"></div>
                   <p class="my-2 border border-secondary">Secondary</p>
                   <div class="vertical-line bg-secondary"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-success"></div>
                   <p class="my-2 border border-success rounded-pill">Success</p>
                   <div class="vertical-line bg-success"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-dark"></div>
                   <svg class="my-2 divider-dark-icon">
                       <use href="../assets/svg/icon-sprite.svg#project-target"></use>
                   </svg>
                   <div class="vertical-line bg-dark"></div>
               </div>
           </div>
           <div class="col-sm-3 col-6">
               <div class="vertical-divider">
                   <div class="vertical-line bg-warning"></div>
                   <p class="my-2 txt-warning">Warning</p>
                   <div class="vertical-line bg-warning"></div>
               </div>
           </div>
       </div>
    </div>

##### Animated Color divider

Use `animated-line` and `animated-divider` classes to create a linear animated divider.

###### Main Heading

This CSS divider embodies simplicity at its finest, yet it exudes an air of elegance and timelessness. Despite its minimalist design, it commands attention effortlessly. While the divider takes center stage in this arrangement, it seamlessly integrates with the overall aesthetic, allowing the backdrop image to shine through.

    <div class="card-body linear-divider">
       <h6>Main Heading</h6>
       <div class="animated-divider animated-line"></div>
       <p class="mb-0 c-light">This CSS divider embodies simplicity at its finest, yet it exudes an air of elegance and timelessness. Despite its minimalist design, it commands attention effortlessly. While the divider takes center stage in this arrangement, it seamlessly integrates with the overall aesthetic, allowing the backdrop image to shine through. </p>
    </div>

##### Horizontal Editable Divider

Use`horizontal-variation` and `double-line-*` classes to create a thickness divider.

Primary
Secondary
Success
Warning
Danger
Info

    <div class="card-body main-divider horizontal-variation">
       <div class="divider linear-line double-line double-line-1" contenteditable="true">Primary</div>
       <div class="divider linear-line double-line double-line-2" contenteditable="true">Secondary</div>
       <div class="divider linear-line double-line double-line-3" contenteditable="true">Success</div>
       <div class="divider linear-line double-line double-line-4" contenteditable="true">Warning</div>
       <div class="divider linear-line double-line double-line-5" contenteditable="true">Danger</div>
       <div class="divider linear-line double-line double-line-6" contenteditable="true">Info</div>
    </div>

##### Simple Horizontal Divider

Use `divider-h-line` class for horizontal divider.

    <div class="card-body main-divider">
       <div class="divider-h-line bg-primary"></div>
       <div class="divider-h-line bg-secondary"></div>
       <div class="divider-h-line bg-success"></div>
       <div class="divider-h-line bg-info"></div>
       <div class="divider-h-line bg-warning"></div>
       <div class="divider-h-line bg-danger"></div>
       <div class="divider-h-line bg-dark"></div>
    </div>

##### Simple Vertical Divider

Use `vr` class for vertical divider.

    <div class="card-body main-divider">
       <div class="common-align">
           <div class="vr bg-primary"></div>
           <div class="vr bg-secondary"></div>
           <div class="vr bg-success"></div>
           <div class="vr bg-info"></div>
           <div class="vr bg-warning"></div>
           <div class="vr bg-danger"></div>
           <div class="vr bg-dark"></div>
       </div>
    </div>