Divider

Use as a separator between content.

Orientation

Use the orientation attribute to control the orientation of the Divider. See the Use Cases.

<script setup lang="ts">
import { VDivider, VLayout } from '@vonage/vivid-api-vue';
</script>

<template>
  <VLayout column-basis="block">
    <VDivider orientation="horizontal"></VDivider>
    <VDivider orientation="vertical" class="vertical"></VDivider>
  </VLayout>
</template>

<style>
.vertical {
  block-size: 40px;
}
</style>

Appearance

Use the appearance attribute to change the Divider’s appearance.

Type: 'ghost' | 'subtle'
Default: 'ghost'

<script setup lang="ts">
import { VDivider, VLayout } from '@vonage/vivid-api-vue';
</script>

<template>
  <VLayout column-basis="block">
    <VDivider></VDivider>
    <VDivider appearance="subtle"></VDivider>
  </VLayout>
</template>