Divider Component

The divider component is used to separate content groups, visually dividing content to better organize page structure.

Basic Usage

The most basic divider, horizontal by default.

This is the content above the divider

This is the content below the divider

Show Code

Direction

Dividers have two directions: horizontal and vertical, with horizontal being the default.

Horizontal divider (default)

Vertical divider

TextTextText

Show Code

Different Styles

Dividers support different border styles: solid (default), dashed, dotted, and double.

Solid divider (default)

Dashed divider

Dotted divider

Double divider

Show Code

Divider with Text

You can embed text content in the divider and customize the text position.

Default center

Left aligned

Right aligned

Show Code

Divider API

Attributes

Attribute	Description	Type	Accepted Values	Default
direction	Divider direction	string	horizontal / vertical	horizontal
borderStyle	Divider style	string	solid / dashed / dotted / double	solid
contentPosition	Text position	string	left / center / right	center

Slots

Slot Name	Description
default	Text content in divider

Style Variables

The divider component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$border-color-default	Divider color
$text-color-default	Text color
$bg-color-default	Background color
$font-size-default	Default font size