Dividers

A divider is a thin line used to group or separate content within a layout, both horizontally and vertically. It helps to create a clear visual hierarchy and structure. ↔️

Examples

Basic Divider

Use the .ro-divider class on an <hr> element to create a horizontal line. By default, it has no vertical margin.

<p>Content above</p>
<hr class="ro-divider" />
<p>Content below</p>

Preview

Content above

---

Content below

Divider with Margin

Add vertical spacing around a horizontal divider using .ro-margin-* classes (or data-ro-margin). The values range from 1 to 4.

<p>Content above</p>
<hr class="ro-divider ro-margin-4" />
<p>Content below</p>

Preview

Content above

---

Content below

Vertical Divider

To create a vertical line, add the .ro-dir-vertical class (or data-ro-dir="vertical"). Vertical dividers are best used within a flex container to separate items horizontally.

<div class="ro-stack ro-items-center">
<span>Left</span>
<hr class="ro-divider ro-dir-vertical" />
<span>Right</span>
</div>

Preview

Left

---

Right

Vertical Divider with Margin

You can also apply horizontal margins to a vertical divider using .ro-margin-*.

<div class="ro-stack ro-items-center">
<span>Left</span>
<hr class="ro-divider ro-dir-vertical ro-margin-3" />
<span>Right</span>
</div>

Preview

Left

---

Right

---

Properties

Divider styles are controlled via utility classes.

Class	Description
.ro-dir-vertical	Sets the orientation of the divider to vertical.
.ro-margin-*	Applies margin around the divider. Options: 1, 2, 3, 4. For horizontal dividers, this applies top/bottom margin. For vertical dividers, this applies left/right margin.

Note: Data attributes data-ro-dir and data-ro-margin are also supported but CSS classes are preferred.