Divider

Ripple UI comes with component to separate your elements with a divider.

​

Default

Simple example of Divider.

<div class="divider"></div>

​

Horizontal Divider

Horizontal divider with text in the middle .

<div class="divider divider-horizontal">OR</div>

​

Vertical Divider

Vertical divider with text in the middle.

<div class="divider divider-vertical h-44">OR</div>

​

Start Text Divider

Divider with text at the start.

<div class="flex items-center gap-1">
	OR
	<div class="divider divider-horizontal w-full"></div>
</div>

​

End Text Divider

Divider with text at the end.

<div class="flex items-center gap-1">
	<div class="divider divider-horizontal w-full"></div>
	OR
</div>

​

With containers

Divider with containers.

<div class="flex w-full justify-center gap-4">
	<div class="card max-w-full items-center justify-center">Default</div>
	<div class="divider divider-vertical mx-0 h-44"></div>
	<div class="card max-w-full items-center justify-center">Default</div>
</div>

​

API