Dividers

Visual separators to organize and structure content with horizontal and vertical lines.

Basic Divider

Use <hr> with the .focus-divider class to create a simple horizontal divider.

Content above the divider

Content below the divider

HTML

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

Spacing Variants

Control the vertical spacing around dividers with size modifiers.

Default spacing

Small spacing

Large spacing

Content after

HTML

<hr class="focus-divider">
<hr class="focus-divider focus-divider-sm">
<hr class="focus-divider focus-divider-lg">

Thickness Variants

Adjust the visual weight of dividers with thickness modifiers.

Default thickness (1px)

Thick divider (2px)

Thicker divider (3px)

HTML

<hr class="focus-divider">
<hr class="focus-divider focus-divider-thick">
<hr class="focus-divider focus-divider-thicker">

Color Variants

Change the divider color to match your design needs.

Light divider (default)

Dark divider

Primary color divider

HTML

<hr class="focus-divider">
<hr class="focus-divider focus-divider-dark">
<hr class="focus-divider focus-divider-primary focus-divider-thick">

Style Variants

Use dashed, dotted, or gradient styles for different visual effects.

Dashed divider

Dotted divider

Gradient divider

HTML

<hr class="focus-divider focus-divider-dashed">
<hr class="focus-divider focus-divider-dotted">
<hr class="focus-divider focus-divider-gradient">

Divider with Text

Add text labels to dividers for section headings or contextual information.

Section 1

HTML

<div class="focus-divider-text">OR</div>
<div class="focus-divider-text">Section 1</div>
<div class="focus-divider-text">Continue Reading</div>

Divider with Icon

Use icons in dividers for enhanced visual separation.

HTML

<div class="focus-divider-icon">
  <i class="fa fa-star"></i>
</div>
<div class="focus-divider-icon">
  <i class="fa fa-circle"></i>
</div>
<div class="focus-divider-icon">
  <i class="fa fa-heart"></i>
</div>

Vertical Divider

Use vertical dividers to separate inline content such as navigation items or toolbar buttons.

Home About Contact

Item 1 Item 2 Item 3

HTML

<a href="#">Home</a>
<span class="focus-divider-vertical"></span>
<a href="#">About</a>
<span class="focus-divider-vertical"></span>
<a href="#">Contact</a>

Common Use Cases

Examples of dividers in real-world scenarios.

Login Form

Password

HTML

<!-- Social login buttons -->
<button class="focus-btn focus-btn-primary">Sign in with Google</button>
<button class="focus-btn focus-btn-secondary">Sign in with GitHub</button>

<!-- Divider with text -->
<div class="focus-divider-text">OR</div>

<!-- Email/password form -->
<input type="email" class="focus-input" placeholder="Email">
<input type="password" class="focus-input" placeholder="Password">
<button class="focus-btn focus-btn-success">Sign In</button>

CSS Classes Reference

Class	Description
`.focus-divider`	Base horizontal divider class
`.focus-divider-sm`	Small vertical spacing
`.focus-divider-lg`	Large vertical spacing
`.focus-divider-thick`	2px thickness
`.focus-divider-thicker`	3px thickness
`.focus-divider-dark`	Darker color variant
`.focus-divider-primary`	Primary theme color
`.focus-divider-dashed`	Dashed line style
`.focus-divider-dotted`	Dotted line style
`.focus-divider-gradient`	Gradient fade effect
`.focus-divider-text`	Divider with centered text label
`.focus-divider-icon`	Divider with centered icon
`.focus-divider-vertical`	Vertical divider for inline content