Divider is used to separate content in a layout. It can be used to create a visual separation between different sections of a page.
<> <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> </>
<> <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> </>
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> </>
<> <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> </>
import { DapDSDivider } from 'dap-design-system/dist/dds'
import { DapDSDividerReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | Whether the divider is vertical |
spacing | 0, 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 1000 , 1200 , 1400 , 1600 , 1800 , 2000 , 2400 , 3000 , 4000 , 5000 , 6000 | 0 | The spacing of the divider |
inverted | boolean | false | Whether the divider is inverted color |
variant | 'normal', 'inverted' | 'normal' | The variant of the divider |
No slots available.
No custom events available.
No CSS parts available.
| Property Name | Description |
|---|---|
--dds-divider-border-width | The width of the divider border. Defaults to var(--dds-border-width-base) |
--dds-divider-border-style | The style of the divider border. Defaults to solid |
--dds-divider-border-color | The color of the divider border. Defaults to var(--dds-border-neutral-divider) |
--dds-divider-border-color-inverted | The color of the divider border when inverted. Defaults to var(--dds-border-neutral-divider-inverted) |