Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Divider

Divide something.

Simple Divider

oops

oops

Vue

<template>
  oops
  <HLDivider />
  oops
</template>

<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

With Text

Center

Left

Right

Vue

<template>
  <HLDivider> Center </HLDivider>
  <HLDivider titlePlacement="left"> Left </HLDivider>
  <HLDivider titlePlacement="right"> Right </HLDivider>
</template>
<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Margins

oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops

With Margins

oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops

No Top Margin

oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops

No Bottom Margin

oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops oops

Vue

<template>
  <HLDivider> With Margins </HLDivider>
  <HLDivider :marginTop="false"> No Top Margin </HLDivider>
  <HLDivider :marginBottom="false"> No Bottom Margin </HLDivider>
</template>
<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Vertical Divider

Text

Text

Vue

<template>
  <div style="display: flex; align-items: center">
    Text
    <HLDivider vertical style="height: 150px; margin: 0 8px" />
    <HLDivider vertical style="height: 120px; margin: 0 8px" />
    <HLDivider vertical style="height: 100px; margin: 0 8px" />
    Text
  </div>
</template>
<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Dashed Divider

Text

Text

Vue

<template>
  Text
  <HLDivider dashed> </HLDivider>
  Text
</template>
<script setup lang="ts">
  import { HLDivider } from '@platform-ui/highrise'
</script>

Accessibility

• Set role="separator" on HLDivider when it communicates structure, adding aria-orientation="vertical" for non-horizontal dividers.
• Provide aria-label / aria-labelledby if the divider carries a caption; otherwise mark it aria-hidden="true" so it stays decorative.

Imports

import { HLDivider } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id	string	Auto (hr-divider-*)	The id of the element. Generated automatically when omitted.
titlePlacement	'left' | 'right' | 'center'	'center'	The position of the title within the divider
dashed	boolean	false	Whether the divider is dashed
vertical	boolean	false	Whether the divider is vertical
marginTop	boolean	true	Whether to apply a margin at the top
marginBottom	boolean	true	Whether to apply a margin at the bottom

Slots

Name	Parameters	Description
default	()	The default content slot