Component

Divider

A hairline that separates content. It runs horizontal or vertical, in solid, dashed, or dotted styles, and can carry a centered label or projected content.

Variants

Solid divider below

Dashed divider below

Dotted divider below

End

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbDividerImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-divider-variants',
  imports: [HbDividerImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4 text-sm text-muted-foreground">
      <span>Solid divider below</span>
      <hb-divider />
      <span>Dashed divider below</span>
      <hb-divider hbVariant="dashed" />
      <span>Dotted divider below</span>
      <hb-divider hbVariant="dotted" />
      <span>End</span>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoDividerVariantsComponent {}

Label & content

Autumn

Vertical

Oak

Beech

Maple

API reference

hb-divider

Property	Description	Type	Default
[hbOrientation]	Direction of the line.	'horizontal' \| 'vertical'	'horizontal'
[hbVariant]	Line style.	'solid' \| 'dashed' \| 'dotted'	'solid'
[hbLabel]	Centered label; projected content overrides it.	string	''
[class]	Extra CSS classes merged onto the host.	string	''