Divider

Stable

Separates two UI elements to show hierarchy and grouping.

<script setup lang="ts">
import { HDivider } from '@holistics/design-system'
</script>

<template>
  <div class="flex h-10 flex-row items-center">
    <div>Content 1</div>
    <HDivider />
    <div>Content 2</div>
    <HDivider />
    <div>Content 3</div>
  </div>
</template>

Examples

Vertical layout

<script setup lang="ts">
import { HDivider } from '@holistics/design-system'

const orientation = 'horizontal'
</script>

<template>
  <div class="flex flex-col items-center">
    <div>Content 1</div>
    <HDivider :orientation />
    <div>Content 2</div>
    <HDivider :orientation />
    <div>Content 3</div>
  </div>
</template>

Compact

<script setup lang="ts">
import { HDivider } from '@holistics/design-system'
</script>

<template>
  <div class="flex h-10 flex-row items-center">
    <div>Content 1</div>
    <HDivider :compact="true" />
    <div>Content 2</div>
    <HDivider :compact="true" />
    <div>Content 3</div>
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
orientation	"horizontal" | "vertical" = "vertical"
compact	boolean