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-divider	Horizontal or vertical divider line.
.ro-dir-vertical, [data-ro-dir="vertical"]	Vertical orientation.
.ro-margin-*, [data-ro-margin]	Margin around the divider (1–4).
--ro-divider-color	Divider line color.
--ro-divider-margin	Default margin token.

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