Skip to main content

Divider

The divider component creates visual separation between content sections by rendering a horizontal or vertical line. Use it to organize information and improve content hierarchy.

Support
Targets (9)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Divider component.

Anchor to direction
direction
'inline' | 'block'
Default: 'inline'

The direction in which children are laid out using logical properties:

  • 'block': Vertical arrangement along the block axis (typically top to bottom) without wrapping
  • 'inline': Horizontal arrangement along the inline axis (typically left to right) with automatic wrapping when space is insufficient
Anchor to id
id
string

A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

Anchor to ExamplesExamples

Anchor to Separate content sections with a dividerSeparate content sections with a divider

Separate content sections using a divider component. This example shows a basic horizontal divider.

Separate content sections with a divider

Separate content sections using a divider component. This example shows a basic horizontal divider.

Separate content sections with a divider

<s-divider />

Anchor to Best practicesBest practices

  • Choose appropriate direction: Use inline (horizontal) for most content separation. Use block (vertical) for columns or sidebar boundaries.
  • Avoid overuse: Use dividers strategically. In dense interfaces, consider whitespace or typography hierarchy instead.
Was this page helpful?