Divider
Overview
The divider component creates visual separation between content sections in layouts. It provides a clean, semantic way to organize content with proper spacing and visual hierarchy. The component supports both horizontal and vertical orientations, customizable spacing, and works seamlessly with different themes.
When to Use
✅ Use dividers when:
Separating distinct content sections
Creating visual hierarchy in lists or cards
Organizing form sections or navigation items
Providing breaks in dense content layouts
Building responsive layouts that need flexible spacing
❌ Don't use dividers for:
Purely decorative purposes without semantic meaning
Heavy visual separation (use spacing or containers instead)
Between every content item (can create visual clutter)
Where whitespace alone would be sufficient
Design system docs Examples
Basic Usage
The default divider provides horizontal separation with standard spacing:
< > < p > < span > text 1 </ span > < dap-ds-divider spacing = " 400 " > </ dap-ds-divider > < span > text 2 </ span > </ p > < p > < span > pure css 1 </ span > < div className = " dds-divider " > </ div > < span > pure css 2 </ span > </ p > </ >
Vertical Dividers
Use vertical dividers to separate content in horizontal layouts such as navigation bars or inline elements:
< > < div style = { { display : 'flex' , alignItems : 'center' , height : 48 } } > vertical / spacing 200
< dap-ds-divider vertical spacing = " 200 " > </ dap-ds-divider > < dap-ds-button > button </ dap-ds-button > </ div > < div style = { { display : 'flex' , alignItems : 'center' , height : 48 } } > pure css vertical / spacing 200
< div className = " dds-divider dds-divider--vertical dds-divider--vertical-spacing-200 " > </ div > < dap-ds-button > button </ dap-ds-button > </ div > </ >
Spacing Controls
Control the spacing around dividers using the design system's spacing scale. This affects the margin on both sides of the divider to create appropriate visual separation:
< > < p > < span > spacing="800" </ span > < dap-ds-divider spacing = " 800 " > </ dap-ds-divider > < span > spacing="800" </ span > </ p > < p > < span > pure css dds-divider--spacing-800 </ span > < div className = " dds-divider dds-divider--spacing-800 " > </ dap-ds-divider > < span > pure css dds-divider--spacing-800 </ span > </ p > </ >
Theme Variations
The divider component automatically adapts to different themes. Use the inverted variant for dark backgrounds:
< > < p style = { { backgroundColor : 'var(--dds-indigo-1000)' , color : 'white' } } > < span > spacing 400 inverted color </ span > < dap-ds-divider variant = " inverted " spacing = " 400 " > </ dap-ds-divider > < span > spacing 400 </ span > </ p > < p style = { { backgroundColor : 'var(--dds-indigo-1000)' , color : 'white' } } > < span > pure css spacing 400 inverted color </ span > < div className = " dds-divider dds-divider--inverted dds-divider--spacing-400 " > </ div > < span > spacing 400 </ span > </ p > </ >
Real-World Patterns
Navigation Separators
< div style = { { border : 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)' , padding : 'var(--dds-spacing-400)' , borderRadius : 'var(--dds-radius-base)' } } > < nav style = { { display : 'flex' , alignItems : 'center' } } > < dap-ds-button variant = " text " size = " sm " > Home </ dap-ds-button > < dap-ds-divider vertical spacing = " 300 " > </ dap-ds-divider > < dap-ds-button variant = " text " size = " sm " > Products </ dap-ds-button > < dap-ds-divider vertical spacing = " 300 " > </ dap-ds-divider > < dap-ds-button variant = " text " size = " sm " > Services </ dap-ds-button > < dap-ds-divider vertical spacing = " 300 " > </ dap-ds-divider > < dap-ds-button variant = " text " size = " sm " > Contact </ dap-ds-button > </ nav > </ div >
Card Content Separation
< div style = { { border : 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)' , padding : 'var(--dds-spacing-600)' , borderRadius : 'var(--dds-radius-base)' , maxWidth : '400px' } } > < dap-ds-stack > < dap-ds-stack > < dap-ds-typography variant = " h4 " > User Profile </ dap-ds-typography > < dap-ds-typography variant = " body " > Manage your account settings and preferences
</ dap-ds-typography > </ dap-ds-stack >
< dap-ds-divider spacing = " 400 " > </ dap-ds-divider >
< dap-ds-stack > < dap-ds-typography variant = " h5 " > Account Information </ dap-ds-typography > < dap-ds-typography variant = " body " style = { { color : 'var(--dds-text-neutral-subtle)' } } > Email: john.doe@example.com
</ dap-ds-typography > < dap-ds-typography variant = " body " style = { { color : 'var(--dds-text-neutral-subtle)' } } > Member since: January 2024
</ dap-ds-typography > </ dap-ds-stack >
< dap-ds-divider spacing = " 400 " > </ dap-ds-divider >
< dap-ds-stack direction = " row " > < dap-ds-button size = " sm " > Edit Profile </ dap-ds-button > < dap-ds-button variant = " outline " size = " sm " > Change Password </ dap-ds-button > </ dap-ds-stack > </ dap-ds-stack > </ div >
Form Section Separators
< div style = { { border : 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)' , padding : 'var(--dds-spacing-600)' , borderRadius : 'var(--dds-radius-base)' , maxWidth : '500px' } } > < dap-ds-stack > < dap-ds-typography variant = " h4 " > Contact Form </ dap-ds-typography >
< dap-ds-stack > < dap-ds-typography variant = " h5 " > Personal Information </ dap-ds-typography > < dap-ds-stack direction = " row " > < dap-ds-input label = " First Name " placeholder = " John " > </ dap-ds-input > < dap-ds-input label = " Last Name " placeholder = " Doe " > </ dap-ds-input > </ dap-ds-stack > < dap-ds-input label = " Email " type = " email " placeholder = " john.doe@example.com " > </ dap-ds-input > </ dap-ds-stack >
< dap-ds-divider spacing = " 600 " > </ dap-ds-divider >
< dap-ds-stack > < dap-ds-typography variant = " h5 " > Message </ dap-ds-typography > < dap-ds-input label = " Subject " placeholder = " How can we help? " > </ dap-ds-input > < dap-ds-textarea label = " Message " placeholder = " Tell us more... " rows = " 4 " > </ dap-ds-textarea > </ dap-ds-stack >
< dap-ds-divider spacing = " 600 " > </ dap-ds-divider >
< dap-ds-stack direction = " row " > < dap-ds-button > Send Message </ dap-ds-button > < dap-ds-button variant = " outline " > Clear Form </ dap-ds-button > </ dap-ds-stack > </ dap-ds-stack > </ div >
List Item Separators
< div style = { { border : 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)' , padding : 'var(--dds-spacing-600)' , borderRadius : 'var(--dds-radius-base)' , maxWidth : '400px' } } > < dap-ds-stack > < dap-ds-typography variant = " h4 " > Recent Activity </ dap-ds-typography >
< dap-ds-stack > < dap-ds-stack direction = " row " justify = " space-between " > < dap-ds-typography variant = " body " > Document updated </ dap-ds-typography > < dap-ds-typography variant = " caption " style = { { color : 'var(--dds-text-neutral-subtle)' } } > 2 hours ago </ dap-ds-typography > </ dap-ds-stack >
< dap-ds-divider spacing = " 300 " > </ dap-ds-divider >
< dap-ds-stack direction = " row " justify = " space-between " > < dap-ds-typography variant = " body " > New comment received </ dap-ds-typography > < dap-ds-typography variant = " caption " style = { { color : 'var(--dds-text-neutral-subtle)' } } > 4 hours ago </ dap-ds-typography > </ dap-ds-stack >
< dap-ds-divider spacing = " 300 " > </ dap-ds-divider >
< dap-ds-stack direction = " row " justify = " space-between " > < dap-ds-typography variant = " body " > Profile photo changed </ dap-ds-typography > < dap-ds-typography variant = " caption " style = { { color : 'var(--dds-text-neutral-subtle)' } } > 1 day ago </ dap-ds-typography > </ dap-ds-stack >
< dap-ds-divider spacing = " 300 " > </ dap-ds-divider >
< dap-ds-stack direction = " row " justify = " space-between " > < dap-ds-typography variant = " body " > Account created </ dap-ds-typography > < dap-ds-typography variant = " caption " style = { { color : 'var(--dds-text-neutral-subtle)' } } > 3 days ago </ dap-ds-typography > </ dap-ds-stack > </ dap-ds-stack > </ dap-ds-stack > </ div >
Importing
Importing React
Attributes
Property Type Default Description verticalbooleanfalseWhether the divider is vertical spacing0, 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 1000 , 1200 , 1400 , 1600 , 1800 , 2000 , 2400 , 3000 , 4000 , 5000 , 60000The spacing of the divider variant'normal', 'inverted''normal'The variant of the divider
Slots
No slots available.
Events
No custom events available.
CSS Parts
No CSS parts available.
CSS Custom Properties
Property Name Description --dds-divider-border-widthThe width of the divider border. Defaults to var(--dds-border-width-base) --dds-divider-border-styleThe style of the divider border. Defaults to solid --dds-divider-border-colorThe color of the divider border. Defaults to var(--dds-border-neutral-divider) --dds-divider-border-color-invertedThe color of the divider border when inverted. Defaults to var(--dds-border-neutral-divider-inverted)
