Divider

Divider is used to separate content in a layout. It can be used to create a visual separation between different sections of a page.

Design system docs Examples Default divider 
<>
<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 
<>
<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

You can set the spacing between the divider and the content, all the spacing values can be use from the spacing scale. For the pure CSS divider you can use the dds-divider--spacing-<spacing> for horizontal and dds-divider--vertical-spacing-<spacing> for vertical dividers.

<>
<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>
</>
Inverted 
<>
<p style={{backgroundColor: 'var(--dds-indigo-1000)', color: 'white'}}>
  <span>spacing 400 inverted color</span>
  <dap-ds-divider 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>
</>
Importing 
import { DapDSDivider } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSDividerReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
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
invertedbooleanfalseWhether the divider is inverted color
Slots

No slots available.

Events

No custom events available.

CSS Parts

No CSS parts available.