Divider

Divider Vertical

You can use divider class to seperate the content and you can seperate the content vertically.

content
OR
content
  <div class="flex flex-col w-full gap-2">
   <div class="grid h-20 card rounded-box place-items-center bg-gray-light"> content </div> 
   <div class="divider"> OR </div> 
   <div class="grid h-20 card rounded-box place-items-center bg-gray-light"> content </div> 
</div>

Divider Without Text

You can use divider class to seperate the two or more content and you can seperate the content vertically without any text.

content
content
  <div class="flex flex-col w-full gap-2">
   <div class="grid h-20 card rounded-box place-items-center bg-gray-light"> content </div> 
   <div class="divider before:w-full after:w-0"> OR </div> 
   <div class="grid h-20 card rounded-box place-items-center bg-gray-light"> content </div> 
</div>

Divider Horizontal

For seperation of content you can use divider & horizontal class to seperate the content horizontally.

content
OR
content
  <div class="flex w-full gap-2">
   <div class="grid h-20 card rounded-box place-items-center w-9/12 bg-gray-light"> content </div> 
   <div class="divider horizontal"> OR </div> 
   <div class="grid h-20 card rounded-box place-items-center w-9/12 bg-gray-light"> content </div> 
</div>

Responsive Divider

To seperate the content you can use divider class for seperation horizontally.

content
OR
content
  <div class="flex w-full gap-2 lg:flex-col">
   <div class="grid h-20 card rounded-box place-items-center w-9/12 bg-gray-light lg:w-full"> content </div> 
   <div class="divider min-lg:horizontal"> OR </div> 
   <div class="grid h-20 card rounded-box place-items-center w-9/12 bg-gray-light lg:w-full"> content </div> 
</div>

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Reset Buy Now