Skip to Content
DocumentationLayout PrimitivesDivider

Divider

Displays divider line between elements.

Usage

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Props

HTML -type:{variation} / JSX type={variation}

solid / dashed / dotted

solid

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider -type:solid" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

dashed

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider -type:dashed" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

dotted

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider -type:dotted" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

slash

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider -type:slash" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

stripe

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider -type:stripe" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

HTML --unitone--divider-color / JSX dividerColor={value}

Divider color.

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider" style="--unitone--divider-color: pink" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

HTML --unitone--divider-size / JSX dividerSize={value}

Divider size.

<div data-unitone-layout="stack">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<div data-unitone-layout="divider" style="--unitone--divider-size: 10px" />
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

HTML --unitone--direction / JSX direction={value}

Divider direction.

horizontal / vertical

<div data-unitone-layout="cluster">
	<p>Lorem ipsum</p>
	<div data-unitone-layout="divider -direction:vertical" />
	<p>Ut enim ad</p>
</div>
Last updated on
DialogFloat