Divider

Stable

Creates separation between two UI elements to establish 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	"vertical" | "horizontal" = "vertical"
compact	boolean