Divider

An element designed to visually separate or partition others.

Defaults

To create a Divider, create an element with the class divider.

Some content

More content

<p>Some content</p>
<hr class="divider" />
<p>More content</p>

Orientation

You can change the direction of a Divider by adding the classes horizontal (default) or vertical.

Some content

More content

<p>Some content</p>
<hr class="divider vertical" />
<p>More content</p>

Thickness

To make the Divider thicker, add the class thick (to make it a little thicker) or thicker (to make it significantly thicker).

For fine-grained control over the line thickness, you can set the --divider-thickness CSS variable on the Divider element. The value of this variable must be a valid line width (e.g., 1px, 0.1rem, var(--border-m)).

Thin (default)

Thick

Thicker

Custom (0.2rem)

<p>Thin (default)</p>
<hr class="divider" />
<p>Thick</p>
<hr class="divider thick" />
<p>Thicker</p>
<hr class="divider thicker" />
<p>Custom (0.2rem)</p>
<hr class="divider" style="--divider-thickness: 0.2rem" />

Pattern

You can change the pattern of a Divider by adding the classes dashed or dotted.

Some content

More content

Even more content

<p>Some content</p>
<hr class="divider dashed" />
<p>More content</p>
<hr class="divider dotted" />
<p>Even more content</p>

Visibility

To add space between elements without a visible line, create a Divider with the class invisible.

Some content

More content

<p>Some content</p>
<hr class="divider invisible" />
<p>More content</p>

Removing Margin

To remove the default margin around a Divider, add the class no-margin.

Some content

More content

<p>Some content</p>
<hr class="divider no-margin" />
<p>More content</p>

Customizing Margin

For fine-grained control over the margin on either side of the Divider, you can set the `--divider-spacing` CSS variable on the Divider element. The value of this variable must be a valid size (e.g., `1rem`, `var(--space-l)`).

Some content

More content

<p>Some content</p>
<hr class="divider" style="--divider-spacing: 1rem" />
<p>More content</p>