Divider
#

The va-divider component is used to separate sections of lists or layouts.

Examples
#

Simple divider
#

Dividers in their simplest form display a horizontal line.

Open in GitHub

Custom content
#

You can customize the content on the divider line. Also you can set position of the content by setting the orientation property to left, center or right.

I'm a list item

I'm a list item

I'm a list item

I'm a list item

Open in GitHub

Vertical divider
#

Add the vertical attribute in order to set whether or not the divider is vertically-oriented.

TitleNewsBlog
Open in GitHub

Inset divider
#

Add the inset attribute in order to set whether or not the divider is an inset divider.

I'm a list item

I'm a list item

Open in GitHub

Dashed divider
#

Add the dashed attribute in order to set whether or not the divider line is dashed.

I'm a list item

I'm a list item

I'm a list item

Open in GitHub

Divider with lists
#

Dividers perfectly work with va-list.

I'm a list item
I'm a list item
I'm a list item
I'm a list item
I'm a list item
Open in GitHub

Accessibility
#

Has a role="separator". Its attribute aria-orientation depends on vertical property. Completely ignored by screen readers because of aria-hidden="true" attribute.

API
#

Props #

NameDescriptionTypesDefault
color

String

"backgroundBorder"

dashed

Boolean

false

inset

Boolean

false

orientation

String

"center"

preset

String

-

vertical

Boolean

false

Slots #

NameDescription

default

Insert content (for horizontal only)

Css Variables #

NameDefault Value
--va-divider-display flex
--va-divider-margin 0.5rem
--va-divider-line-width 1px
--va-divider-border-style solid
--va-divider-text-font-size 0.875rem
--va-divider-text-line-height 0
--va-divider-text-height 0
--va-divider-text-vertical-align middle
--va-divider-text-transform translateY(-50%)
--va-divider-text-horizontal-offset 1.25rem
--va-divider-vertical-display inline-flex
--va-divider-inset-horizontal-margin 1rem
--va-divider-inset-margin 0.5rem var(--va-divider-inset-horizontal-margin)
--va-divider-dashed-border-top-style dashed