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
Use cases
- Content separation: Separate distinct content sections within forms, lists, or panels.
- Visual breaks: Create breaks between groups of related actions or controls.
- Information boundaries: Establish clear boundaries between different types of information.
- Hierarchy: Improve content hierarchy by dividing complex interfaces into digestible sections.
Anchor to examplesExamples
Anchor to example-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 />
Examples
Separate content sections with a divider
Description
Separate content sections using a `Divider` component. This example shows a basic horizontal divider.
Default
<s-divider />
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 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?