Layout

Divider

Storybook

It's component that renders a horizontal line to visually separate content.

Import

1import { Divider } from 'dd360-ds'

1import Divider from 'dd360-ds/Divider'

Usage

1import { Divider } from 'dd360-ds'
2
3<Divider />

Light

A boolean that determines whether the Divider should be rendered in a lighter color. The default value is false.

1import { Divider } from 'dd360-ds'
2
3<Divider light />

Variant

A string that determines the style of the Divider. It can be either 'full' or 'middle'. If not provided, the default value is null.

1import { Divider } from "dd360-ds"
2
3<Divider variant="middle" />
4<Divider variant="full" />

Size

A string that determines the thickness of the Divider. It can be either 'large', 'medium', or 'small'. The default value is 'small'.

1import { Divider } from "dd360-ds"
2
3<Divider size="small" />
4<Divider size="medium" />
5<Divider size="large" />

API Reference