Divider
A divider is a thin line that visually separates groups of content within a specific area of an application.
| Name | Type | Description | Default |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | The divider can be showed in horizontal or vertical. | 'horizontal' |
| weight | 'regular' | 'strong' | Modifies the thickness of the divider. | 'regular' |
| color | 'lightGrey' | 'mediumGrey' | 'darkGrey' | Modifies the color of the divider. | 'mediumGrey' |
| decorative | boolean | Specifies whether the divider serves a purely decorative purpose or functions as a semantic separator for content. Additionally, it determines whether the divider is accessible to screen readers. | true |
() => { return ( <DxcInset space="2rem"> <DxcFlex gap="1rem" direction="column"> <DxcParagraph> Lorem i psum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. </DxcParagraph> <DxcDivider /> <DxcParagraph> Lorem i psum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. </DxcParagraph> </DxcFlex> </DxcInset> ); }
() => { return ( <DxcInset space="2rem"> <DxcFlex gap="1rem" direction="row"> <DxcParagraph> Lorem i psum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. </DxcParagraph> <DxcDivider orientation="vertical" /> <DxcParagraph> Lorem i psum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. </DxcParagraph> </DxcFlex> </DxcInset> ); }