Separator

A visual divider that separates content into distinct sections, with support for horizontal and vertical orientations.

Horizontal

Section 1

This is the first section of content.

Section 2

This is the second section of content.

Vertical

Home

About

Services

Contact

Inset frames

Use inset when a divider meets a 1px frame painted over the content. The separator reserves 1px at each end and uses solid gray-400. A physical parent border already reserves its edge space and does not need this inset.

Deployment
Deployment details

Orientation Variants

Horizontal Separators

Content above separator

Content below separator

Vertical Separators

LeftCenterRight

Was this helpful?

supported.