Divider

vel-src: divider.css

A horizontal or vertical separator used to visually divide sections of content, with optional centered or aligned label text.

Class	Properties
vel-divider	Centered label divider — renders label text between two horizontal lines
vel-divider-plain	Plain horizontal rule with no label text
vel-divider-left	Modifier to left-align the label text on the divider
vel-divider-right	Modifier to right-align the label text on the divider
vel-divider-vertical	Renders a vertical inline separator between elements
vel-divider-primary	Applies the primary brand color to the divider line

Examples

Plain divider

Content above

Content below

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <p style="color:#94a3b8;margin-bottom:12px;">Content above</p>
  <hr class="vel-divider-plain" />
  <p style="color:#94a3b8;margin-top:12px;">Content below</p>
</div>

With label

Continue with provider

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <p style="color:#94a3b8;margin-bottom:12px;">Sign in with email</p>
  <div class="vel-divider">OR</div>
  <p style="color:#94a3b8;margin-top:12px;">Continue with provider</p>
</div>

Left-aligned label

Section Title

Content that follows this section heading.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div class="vel-divider vel-divider-left">Section Title</div>
  <p style="color:#94a3b8;margin-top:12px;">Content that follows this section heading.</p>
</div>