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>
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>
Spacing

You can set the spacing between the divider and the content, all the spacing values can be use from the spacing scale.

<p>
  <span>spacing="800"</span>
  <dap-ds-divider spacing="800"></dap-ds-divider>
  <span>spacing="800"</span>
</p>
Importing 
import { DapDSDivider } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSDividerReact } from 'dap-design-system/dist/react'
Slots

No slots available.

Attributes
PropertyTypeDefaultDescription
verticalbooleanfalseWhether the divider is vertical. Default is false.
spacingSpacing0The spacing of the divider. Default is 0. It is uses the design system values (100, 200, 300, etc...)
Events

No custom events available.

CSS Parts

No CSS parts available.