Divider

New

A simple way to separate content and give each section room to breathe.

Horizontal & verticalContent alignmentThree line styles

Basic

Place a divider between related blocks to create a clear visual break.

Your workspace

Bring your ideas, resources and project notes together.

The next step

Choose a direction and share it with your team.

Line styles

Choose a solid, dashed or dotted line with the type input.

Solid

Dashed

Dotted

Content & alignment

Project text, an icon or a badge. Horizontal labels can align left, center or right.

Overview

A short label adds context to the content that follows.

Continue exploring

Lines adapt to the label width without covering its background.

Next steps →

Vertical

Use a flex row for side-by-side content. Vertical labels support top, center and bottom alignment.

Explore

Discover the building blocks for your application.

Compose

Combine components into a workspace of your own.

Top

Center

Bottom

Custom styling

Match a divider to its surroundings using CSS variables.

Made for your UI

Usage and API

Import AvDivider from avero-ui and add it to your component imports.

Angular / HTML

import { AvDivider } from 'avero-ui';

<av-divider />
<av-divider type="dashed" align="left">Details</av-divider>
<av-divider type="dotted">OR</av-divider>

<!-- Place vertical dividers in a flex row with height or content. -->
<div style="display: flex; min-height: 160px">
  <p>First column</p>
  <av-divider layout="vertical" align="top">OR</av-divider>
  <p>Second column</p>
</div>

Inputs. layout: horizontal (default) or vertical. type: solid (default), dashed or dotted. align: center (default), left/right for horizontal and top/bottom for vertical. An alignment from the other orientation falls back to center.

Accessibility. The component has role="separator" and an aria-orientation that follows layout. It is not focusable. Use presentational content for labels; place interactive controls outside the divider. You can set aria-label on av-divider to name a section break.

Theme. Customize --av-divider-color, --av-divider-width, --av-divider-spacing, --av-divider-content-gap, --av-divider-text-color and --av-divider-font-size. Vertical dividers stretch to the parent flex row; use a parent height or --av-divider-min-height when needed.