Divider

Examples

divider

content

<div class="flex flex-col w-full">
  <div class="grid h-20 card dv-bgbase300 rounded-xl place-items-center">
    content
  </div>
  <dv-divider>OR</dv-divider>
  <div class="grid h-20 card dv-bgbase300 rounded-xl place-items-center">
    content
  </div>
</div>
vue

divider horizontal

Preview Code

content

<div class="flex flex-row w-full">
  <div
    class="grid flex-grow h-32 card dv-bgbase300 rounded-xl place-items-center"
  >
    content
  </div>
  <dv-divider horizontal>OR</dv-divider>
  <div
    class="grid flex-grow h-32 card dv-bgbase300 rounded-xl place-items-center"
  >
    content
  </div>
</div>
vue

divider with no text

Preview Code

content

<div class="flex flex-col w-full">
  <div class="grid h-20 card dv-bgbase300 rounded-xl place-items-center">
    content
  </div>
  <dv-divider />
  <div class="grid h-20 card dv-bgbase300 rounded-xl place-items-center">
    content
  </div>
</div>
vue

divider with no text

Preview Code

content

<div class="flex flex-row w-full">
  <div
    class="grid flex-grow h-32 card dv-bgbase300 rounded-xl place-items-center"
  >
    content
  </div>
  <dv-divider horizontal />
  <div
    class="grid flex-grow h-32 card dv-bgbase300 rounded-xl place-items-center"
  >
    content
  </div>
</div>
vue

Divider

Attributes

name	description	type	default
horizontal	Divide elements next to each other	boolean	false