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
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 NameDescription
--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)