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 (10)
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Anchor to PropertiesProperties
Configure the following properties on the divider component.
- Anchor to directiondirectiondirection'inline' | 'block''inline' | 'block'Default: 'inline'Default: 'inline'
Specify the direction of the divider. This uses logical properties.
- Anchor to idididstringstring
A unique identifier for the element.
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?