Divider

Dividers are thin lines that help organize content into clear groups or sections. They support text labels, vertical orientations, and various line styles to match the content hierarchy.

Basic Examples

Horizontal Divider

Standard horizontal separator for content flow.

With Text Labels

Label Alignment

Dividers can hold text labels, which is common in authentication forms or list breaks.

Left Aligned Label

Centered Label

Right Aligned Label

<div class="wf-divider wf-divider-start">Start Label</div>
<div class="wf-divider">Center Label</div>
<div class="wf-divider wf-divider-end">End Label</div>

Color Variations

Thematic Accents

Apply semantic colors to dividers to match your UI feedback loop.

Primary Divider

Secondary Divider

Alert Divider

Positive Divider

Negative Divider

Info Divider

<div class="wf-divider wf-divider-primary">Primary</div>
<div class="wf-divider wf-divider-secondary">Secondary</div>
<div class="wf-divider wf-divider-positive">Positive</div>
<div class="wf-divider wf-divider-negative">Negative</div>
<div class="wf-divider wf-divider-info">Info</div>
<div class="wf-divider wf-divider-alert">Alert</div>

Line Thickness

Visual Weight

Use weight modifiers to create stronger boundaries between major layout sections.

Standard (1px)

Medium (2px)

Large (3px)

<div class="wf-divider wf-divider-sm"></div>
<div class="wf-divider wf-divider-md"></div>
<div class="wf-divider wf-divider-lg"></div>

Line Styles

Use different line styles to create visual variety and emphasis.

Dashed

Dotted

<div class="wf-divider wf-divider-dashed"></div>
<div class="wf-divider wf-divider-dotted"></div>

Vertical Orientation

Inline Separators

Vertical dividers require a set height or a flex container to expand vertically.

Profile

Settings

Logout

<div class="wf-row wf-justify-center wf-gap-4">
    <span>Item</span>
    <div class="wf-divider wf-divider-vertical"></div>
    <span>Item</span>
    <!-- ... -->
</div>

Vertical Variations

Inline Separators

Use .wf-divider-vertical between adjacent blocks in a row layout to create a vertical separator with optional label.

Items Center

OR

Items Center

<div class="wf-row ...">
  <div>Items Center</div>
  <div class="wf-divider wf-divider-vertical wf-divider-md">OR</div>
  <div>Items Center</div>
</div>

Vertical Short Variant

Use .wf-divider-short when you need a compact separator that does not stretch the full container height.

Items Center

<div class="wf-row ...">
  <div>Items Center</div>
  <div class="wf-divider wf-divider-vertical wf-divider-short"></div>
  <div>Items Center</div>
</div>

Vertical Orientation

Vertical Positioning

Use .wf-divider-short with .wf-divider-top , or .wf-divider-bottom with .wf-divider-vertical to control where the separator sits inside a taller row. The center position is set by default.

Items Center

<div class="wf-row ...">
  <div>Items Center</div>
  <div class="wf-divider wf-divider-vertical wf-divider-short wf-divider-top"></div>
  <div>Items Center</div>
  <div class="wf-divider wf-divider-vertical wf-divider-short wf-divider-bottom"></div>
  <div>Items Center</div>
  <!-- ... -->
</div>;

Class Reference

All modifier classes available on .wf-divider

Class Name	Type	Description
wf-divider	Base	Creates a horizontal line with standard margin and color.
wf-divider-vertical	Modifier	Transforms the divider into a vertical line (requires height in parent).
wf-divider-start / -end	Alignment	Aligns the text label to the left or right side.
wf-divider-*	Position	Aligns vertical divider to the `top`, `bottom`, or `center` of the container.
wf-divider-dashed / -dotted	Style	Changes the border style of the divider line.
wf-divider-{color}	Color	Applies theme colors (e.g., `primary`, `secondary`, `danger`).
wf-divider-sm / -md / -lg	Weight	Increases the thickness of the divider line.