Divider
Horizontal and vertical separators for content sections
Basic Horizontal Divider
A simple horizontal line to separate content sections.
Content above the divider.
Content below the divider.
HTML
<hr class="bl-divider">Divider with Text
Add text in the middle of the divider for section labels.
Content above.
OR
Content below.
HTML
<div class="bl-divider-text">OR</div>Vertical Divider
Use vertical dividers to separate inline content.
Item 1
Item 2
Item 3
Item 2
Item 3
HTML
<span>Item 1</span>
<hr class="bl-divider-vertical">
<span>Item 2</span>Sizes
Adjust the spacing with size modifiers.
Small spacing
Default spacing
Large spacing
Extra large spacing
End
HTML
<hr class="bl-divider bl-divider-sm">
<hr class="bl-divider">
<hr class="bl-divider bl-divider-lg">
<hr class="bl-divider bl-divider-xl">Variants
Thick Divider
Content above
Content below
HTML
<hr class="bl-divider bl-divider-thick">Dashed Divider
Content above
Content below
HTML
<hr class="bl-divider bl-divider-dashed">Features
- Horizontal & Vertical: Separate content in any direction
- Text Labels: Add descriptive text in the center of dividers
- Flexible Spacing: Four size options (sm, md, lg, xl)
- Style Variants: Solid, thick, or dashed lines
- Glassmorphism: Subtle glass-effect borders matching the theme