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
<p> <span>text 1</span> <dap-ds-divider spacing="400"></dap-ds-divider> <span>text 2</span> </p>
<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>
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>
import { DapDSDivider } from 'dap-design-system/dist/dds'
import { DapDSDividerReact } from 'dap-design-system/dist/react'
No slots available.
| Property | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | Whether the divider is vertical. Default is false. |
spacing | Spacing | 0 | The spacing of the divider. Default is 0. It is uses the design system values (100, 200, 300, etc...) |
No custom events available.
No CSS parts available.