AvesraAvesrabeta

Separator

Visually divide content sections

Import

import { AvSeparatorImports } from '@avesra/angular';

Usage

Avesra Components

Beautiful, fast and modern Angular UI library.

BlogDocsSource
import { Component } from '@angular/core';
import { AvSeparatorImports } from '@avesra/angular';

@Component({
  selector: 'app-separator-basic-demo',
  imports: [AvSeparatorImports],
  template: `<div class="max-w-md">
  <div class="space-y-1">
    <h4 class="text-sm font-medium text-foreground">Avesra Components</h4>
    <p class="text-sm text-muted">Beautiful, fast and modern Angular UI library.</p>
  </div>
  <hr av-separator class="my-4" />
  <div class="flex h-5 items-center gap-4 text-sm">
    <span>Blog</span>
    <div av-separator orientation="vertical"></div>
    <span>Docs</span>
    <div av-separator orientation="vertical"></div>
    <span>Source</span>
  </div>
</div>`,
})
export class SeparatorBasicDemo {}

Anatomy

Use hr[av-separator] or div[av-separator] for a plain rule. For labeled dividers, compose div[av-separator-container], div[av-separator-line], and span[av-separator-content]. 

<!-- Simple divider -->
<hr av-separator />
<div av-separator orientation="vertical"></div>

<!-- Labeled compound divider -->
<div av-separator-container>
  <div av-separator-line></div>
  <span av-separator-content>Label</span>
  <div av-separator-line></div>
</div>

Variants

Default Variant
Secondary Variant
Tertiary Variant
import { Component } from '@angular/core';
import { AvSeparatorImports } from '@avesra/angular';

@Component({
  selector: 'app-separator-variants-demo',
  imports: [AvSeparatorImports],
  template: `<div class="flex max-w-md flex-col items-center gap-3">
  <div>Default Variant</div>
  <hr av-separator variant="default" />
  <div>Secondary Variant</div>
  <hr av-separator variant="secondary" />
  <div>Tertiary Variant</div>
  <hr av-separator variant="tertiary" />
</div>`,
})
export class SeparatorVariantsDemo {}

With Surface

The Separator component adapts to different surface backgrounds for better visibility.

Default Surface

Surface Content

Secondary Surface

Surface Content

Tertiary Surface

Surface Content

Transparent Surface

Surface Content

import { Component } from '@angular/core';
import { AvSeparatorImports, AvSurfaceComponent } from '@avesra/angular';

@Component({
  selector: 'app-separator-with-surface-demo',
  imports: [AvSeparatorImports, AvSurfaceComponent],
  template: `<div class="flex flex-col gap-8">
  <div class="flex flex-col gap-2">
    <div av-surface variant="default" class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6">
      <h3 class="text-base font-semibold text-foreground">Default Surface</h3>
      <hr av-separator />
      <p class="text-sm text-muted">Surface Content</p>
    </div>
  </div>

  <div class="flex flex-col gap-2">
    <div av-surface variant="secondary" class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6">
      <h3 class="text-base font-semibold text-foreground">Secondary Surface</h3>
      <hr av-separator variant="secondary" />
      <p class="text-sm text-muted">Surface Content</p>
    </div>
  </div>

  <div class="flex flex-col gap-2">
    <div av-surface variant="tertiary" class="flex min-w-[320px] flex-col gap-3 rounded-3xl p-6">
      <h3 class="text-base font-semibold text-foreground">Tertiary Surface</h3>
      <hr av-separator variant="tertiary" />
      <p class="text-sm text-muted">Surface Content</p>
    </div>
  </div>

  <div class="flex flex-col gap-2">
    <div
      av-surface
      variant="transparent"
      class="flex min-w-[320px] flex-col gap-3 rounded-3xl border border-border p-6"
    >
      <h3 class="text-base font-semibold text-foreground">Transparent Surface</h3>
      <hr av-separator />
      <p class="text-sm text-muted">Surface Content</p>
    </div>
  </div>
</div>`,
})
export class SeparatorWithSurfaceDemo {}

Vertical

BlogDocsSource
import { Component } from '@angular/core';
import { AvSeparatorImports } from '@avesra/angular';

@Component({
  selector: 'app-separator-vertical-demo',
  imports: [AvSeparatorImports],
  template: `<div class="flex h-5 items-center gap-4 text-sm">
  <span>Blog</span>
  <div av-separator orientation="vertical"></div>
  <span>Docs</span>
  <div av-separator orientation="vertical"></div>
  <span>Source</span>
</div>`,
})
export class SeparatorVerticalDemo {}

With Content

Set Up Notifications

Set Up Notifications

Receive account activity updates

Secure Your Account

Secure Your Account

Enable two-factor authentication

Launch Your Project

Launch Your Project

Create your first workspace

import { Component } from '@angular/core';
import { AvSeparatorImports } from '@avesra/angular';

interface SeparatorDemoItem {
  iconUrl: string;
  title: string;
  subtitle: string;
}

@Component({
  selector: 'app-separator-with-content-demo',
  imports: [AvSeparatorImports],
  template: `<div class="max-w-md space-y-4">
  @for (item of items; track item.title; let last = $last) {
    <div>
      <div class="flex items-center gap-3">
        <img [alt]="item.title" class="size-12" [src]="item.iconUrl" />
        <div class="flex-1 space-y-0">
          <h4 class="text-sm font-medium text-foreground">{{ item.title }}</h4>
          <p class="text-sm text-muted">{{ item.subtitle }}</p>
        </div>
      </div>
      @if (!last) {
        <hr av-separator class="my-4" />
      }
    </div>
  }
</div>`,
})
export class SeparatorWithContentDemo {
  readonly items: SeparatorDemoItem[] = [
    {
      iconUrl: '/images/icons/icon-3d-alarm-clock-red.png',
      title: 'Set Up Notifications',
      subtitle: 'Receive account activity updates',
    },
    {
      iconUrl: '/images/icons/icon-3d-shield-check.png',
      title: 'Secure Your Account',
      subtitle: 'Enable two-factor authentication',
    },
    {
      iconUrl: '/images/icons/icon-3d-rocket-launch.png',
      title: 'Launch Your Project',
      subtitle: 'Create your first workspace',
    },
  ];
}

With Label

Compose container, line, and content parts for a labeled divider. Set orientation="vertical" on div[av-separator-container] for a vertical stack.

OR
OR
import { Component } from '@angular/core';
import { AvSeparatorImports } from '@avesra/angular';

@Component({
  selector: 'app-separator-with-label-demo',
  imports: [AvSeparatorImports],
  template: `<div class="max-w-md space-y-6">
  <div av-separator-container>
    <div av-separator-line></div>
    <span av-separator-content>OR</span>
    <div av-separator-line></div>
  </div>

  <div av-separator-container orientation="vertical" class="mx-auto h-24">
    <div av-separator-line></div>
    <span av-separator-content>OR</span>
    <div av-separator-line></div>
  </div>
</div>`,
})
export class SeparatorWithLabelDemo {}

Styling

Passing Tailwind CSS classes

Pass utility classes on the separator host — for example hr[av-separator] or div[av-separator].

Custom Separator

Pass Tailwind utilities on the host element.

import { Component } from '@angular/core';
import { AvSeparatorImports } from '@avesra/angular';

@Component({
  selector: 'app-separator-custom-styling-demo',
  imports: [AvSeparatorImports],
  template: `<div class="max-w-md">
  <div class="space-y-1">
    <h4 class="text-sm font-medium text-foreground">Custom Separator</h4>
    <p class="text-sm text-muted">Pass Tailwind utilities on the host element.</p>
  </div>
  <hr
    av-separator
    class="my-8 h-0.5 bg-linear-to-r from-transparent via-accent to-transparent"
  />
</div>`,
})
export class SeparatorCustomStylingDemo {}

Customizing the component classes

To customize the Separator classes, use the @layer components directive. Learn more. 

@layer components {
  .av-separator {
    @apply bg-accent h-[2px];
  }

  .av-separator--vertical {
    @apply bg-accent w-[2px];
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Separator component uses these CSS classes:

Base & Orientation Classes

  • .av-separator — Base separator styles with default horizontal orientation
  • .av-separator--horizontal — Horizontal orientation (full width, 1px height)
  • .av-separator--vertical — Vertical orientation (full height, 1px width)

Variant Classes

  • .av-separator--default — Default variant with standard contrast
  • .av-separator--secondary — Secondary variant with medium contrast
  • .av-separator--tertiary — Tertiary variant with subtle contrast

Compound Element Classes

  • .av-separator__container — Labeled separator wrapper
  • .av-separator__line — Flex-grow line segment
  • .av-separator__content — Center label or icon

API

Props for hr[av-separator] / div[av-separator]. div[av-separator-container] accepts the same orientation and variant inputs and shares them with child lines via context. div[av-separator-line] and span[av-separator-content] inherit when omitted.

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'The orientation of the separator. Inherits from av-separator-container when omitted (av-separator / av-separator-line / av-separator-content).
variant'default' | 'secondary' | 'tertiary''default'The visual variant of the separator. Inherits from av-separator-container when omitted (av-separator / av-separator-line).

Made with ❤ by SyntaxHertz. Open source and available on GitHub.