1. Components
  2. divider

Divider

Insert a horizontal rule or a thematic break to divide or separate sections.

Default 

<div class="flex flex-col gap-4">
    <hr class="b-primary600">
    <hr class="b-secondary">
    <hr class="b-danger">
    <hr class="b-gray">
</div>

With Label

Label Start
Label Center
Label Start
Custom label 
<div class="flex flex-col gap-4 wfull">
    <div  class="divider-custom divider-custom-1 before-bg-bg-muted flex justify-start items-center">
        <span class="pr-3 bg-bg text-fg relative">Label Start</span>
    </div>
    <div  class="divider-custom divider-custom-1 before-bg-bg-muted flex justify-center items-center">
        <span class="px-3 bg-bg text-fg relative">Label Center</span>
    </div>
    <div  class="divider-custom divider-custom-1 before-bg-bg-muted flex justify-end items-center">
        <span class="pl-3 bg-bg text-fg relative">Label Start</span>
    </div>
    <div  class="divider-custom divider-custom-1 before-bg-bg-muted flex justify-center items-center">
        <span class="px-3 bg-emerald-600 dark:bg-emerald-500 text-sm text-white rd-full py-px relative">Custom label</span>
    </div>
</div>
Prev
Dropdown

Select one option from a list.

Next
On this page