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 (7)
Anchor to PropertiesProperties
Configure the following properties on the Divider component.
- Anchor to directiondirectiondirection'inline' | 'block''inline' | 'block'Default: 'inline'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 idididstringstring
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 with a divider
<s-divider />
Anchor to Best practicesBest practices
- Choose appropriate direction: Use
inline(horizontal) for most content separation. Useblock(vertical) for columns or sidebar boundaries. - Avoid overuse: Use dividers strategically. In dense interfaces, consider whitespace or typography hierarchy instead.
Was this page helpful?